Afficher un QML lors d'un clic

Version imprimable

Bonsoir,

Je ne comprend pas quelque chose qui pourra paraître facile pour certains...
J'ai un fichier main.qml :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
Rectangle {
    id: rectangle1
    width: 800
    height: 500
    MouseArea {
        id: mousearea1
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        z: 0
 
        Rectangle {
            id: menuu
            width: 800
            height: 25
            anchors.bottomMargin: 475
            anchors.fill: parent
 
            Text {
                id: ouvrir
                x: 15
                y: 5
                color: "#ffffff"
                text: qsTr("Ouvrir")
                font.pixelSize: 10
 
                MouseArea {
                    id: mouse_ouvrir
                    anchors.fill: parent
                    onClicked: { //?? }
                }
            }
}
}

Lorsque je clique sur mouse_ouvrir, je voudrais qu'une fenetre ListView tel que je l'ai décrit dans file.qml s'affiche :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
ListView {
    id: filebrowser
    width: 360
    height: 300
    FolderListModel {
        id: foldermodel
        folder: "file:///home/user/"
        nameFilters: ["*.jpg", "*.png", "*.bmp", "*.jpeg"]
        showDotAndDotDot: true
    }
 
    Component {
        id: filedelegate
        Rectangle {
            width: parent.width
            height: 30
            Text {
                text: fileName+" "+filePath
                anchors.fill: parent
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if (foldermodel.isFolder(index)) {
                            foldermodel.folder = filePath
                        }
                    }
                }
            }
        }
    }
 
    model: foldermodel
    delegate: filedelegate
}

C'est la première fois que je code en QML, je n'avais fait que des GUI avec des fichiers .ui et j'ai du mal à comprendre la logique des QML...

Merci :D

09/08/2012, 01h10
loupium

Salut,
Pour commencer, dans ton main.qml, le MouseArea ne devrait pas avoir d'enfant (le rectangle dans ton cas).
Ensuite, pour faire apparaitre des éléments nouveaux, il y a 2 façons de faire : Statique ou dynamique. Pour débuter commence par la statique qui consiste à cacher ce que l'on souhaite faire apparaitre. Soit en utilisant la propriété opacity du rectangle ou en décalant l'élément en dehors de la vue.
@+

Bonsoir,

Ou tout simplement avec une propriété "visible", spécialement prévue pour cela. Généralement, s'il y a moyen d'éviter de passer par du dynamique (hors cas des modèles, je parle de createComponent() ou de Loaders) en passant par une méthode statique de camouflage d'un élément, il vaut mieux le faire car cela permet d'éviter d'avoir pas mal de mémoire à gérer derrière.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Rectangle { id: main width: 100 height: 100 MouseArea { anchors.fill: parent onClicked: { view.visible = true; } } MonItem { id: view visible: false } }
À savoir que dans le cas présent, un fichier nommé MonItem.qml se situera à côté du fichier main.qml. C'est la partie devant l'extension .qml qui détermine le nom de l'élément QML créé.

Bonne continuation,
Amnell.

09/08/2012, 22h54
dourouc05

Citation:

Envoyé par Amnell

Généralement, s'il y a moyen d'éviter de passer par du dynamique (hors cas des modèles, je parle de createComponent() ou de Loaders) en passant par une méthode statique de camouflage d'un élément, il vaut mieux le faire car cela permet d'éviter d'avoir pas mal de mémoire à gérer derrière.

Sauf qu'il faut alors charger ces composants dès le démarrage de l'application ; c'est probablement sans grande conséquence dès qu'il y a de la puissance de calcul, mais un mobile aura plus de mal à charger beaucoup de composants sans laisser poireauter l'utilisateur un certain temps. (C'est une optimisation, ce n'est pas à faire dès le début du développement de l'application sauf si on sait d'avance qu'on devra charger un grand nombre de composants et que les plateformes cible pourraient ne pas le digérer facilement – premature optimisation is root of all evil.)
10/08/2012, 04h13
loupium

J'ai une petite préférence pour opacity qui permet d'ajouter facilement une transition dans le futur.
Je n'ai pas vérifié, mais mon petit doigt me dit que opacity: 0 est équivalent à visible: 0 et doivent être gérés de la même façon en interne de Qt.
10/08/2012, 07h04
Amnell
Citation:

Envoyé par loupium

J'ai une petite préférence pour opacity qui permet d'ajouter facilement une transition dans le futur.
Je n'ai pas vérifié, mais mon petit doigt me dit que opacity: 0 est équivalent à visible: 0 et doivent être gérés de la même façon en interne de Qt.

L'un n'empêche pas l'autre :
Code:

1 2 3 4 5 6 7 Rectangle { visible: false opacity: visible ? 1 : 0; // ... Behavior on opacity { NumberAnimation { duration: 500; } } }
10/08/2012, 08h30
Ploupi

@loupium : merci, pour le mouseArea, une simple erreur de ma part pour avoir gardé le squelette de base lors de la création de mon projet QtQuick.

@Amnell & @dourouc05: merci pour vos contributions et réponses.

@Amnell : Donc dans ton exemple (si j'ai bien compris), MonItem.qml contiendra la définition d'un élément qui peut être un Rectangle, etc etc.
On ne peut donc pas découper dans un fichier séparé, par exemple, la définition des éléments d'un coté et les animations (comportements) de l'autre ?

Merci d'avance
10/08/2012, 08h55
Amnell

Bonjour,

Globalement, vous pouvez travailler comme vous le souhaitez. Là, j'ai donné un exemple simple afin d'aider à la compréhension. Le fichier MonItem.qml définit un élément nommé "MonItem" réutilisable au besoin dans vos fichiers QML. Vous pouvez y mettre ce que vous souhaitez. En admettant que vous souhaiteriez faire un système de trois pages avec une page d'accueil, une page principale et une page d'aide avec les infos du créateur, etc., le main.qml pourra par exemple contenir trois éléments, HomePage, MainPage et HelpPage, par exemple, qui contiendront eux-même les éléments qu'ils souhaitent utiliser. Pour tout ce qui est transition entre les pages, l'idéal est d'avoir un code situé au même endroit pour éviter des problèmes inutiles. Un fichier JavaScript ? Le main.qml ? C'est comme vous voulez. Pour les animations, vous pouvez les mettre directement en Behavior ou bien en Transition pour des States. C'est à vous de choisir, le développement avec QML laisse beaucoup de libertés.

Je ne sais pas si cela répond à votre question.

Bonne continuation,
Amnell.
05/09/2012, 16h11
loupium

Bonjour,

Désoler de répondre si tardivement, mais utiliser la propriété visible au lieu de opacity ne provoque pas la même animation Amnell. Le timing est très important en qml.

@+
05/09/2012, 19h48
Amnell
Citation:

Envoyé par loupium

Bonjour,

Désoler de répondre si tardivement, mais utiliser la propriété visible au lieu de opacity ne provoque pas la même animation Amnell. Le timing est très important en qml.

@+

Mon exemple était tourné à l'envers. La bonne version est la suivante :
Code:

1 2 3 4 5 6 7 Rectangle { visible: opacity != 0 opacity: 1 // ... Behavior on opacity { NumberAnimation { duration: 500; } } }
Je pense que c'est bien plus propre de faire cela que de laisser juste opacity à 0. Avec cela, quand l'animation prend fin, et donc quand l'opacité tombe à 0, la propriété visible passe à false. Après, je ne sais pas si opacity = 0 en interne est équivalent ou non à visible = false. Probablement pas, vu que les MouseArea en opacity 0 restent sans doute actives. À tester.
05/09/2012, 21h48
loupium
Code:

1 2 3 4 5 6 7 Rectangle { visible: opacity != 0 opacity: 1 // ... Behavior on opacity { NumberAnimation { duration: 500; } } }
Donc le contrôle de visibilité de ce rectangle depuis l'extérieur doit bien être réalisé à travers la propriété "opacity". La propriété "visible" devient superflue.
Pour s'en convaincre, il faut regarder QGraphicsItemPrivate::discardUpdateRequest dans le fichier qgraphicsitem.cpp.
@+