Discussion :

[Ploupi]

Bonsoir,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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.
@+

[Amnell]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[dourouc05]

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.)

[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.

[Amnell]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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

[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.

[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.

@+

[Amnell]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[loupium]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.
@+