Discussion :

[Simlock]

Bonjour,

J'ai un soucis pour organiser mon architecture proprement et faire passer des propriétés sans que cela devienne une usine à gaz.

Je souhaite avoir plusieurs pistes qui, à gauche de ma page, aurait un "maître" qui piloterait tout ses "esclaves" à sa droite. Et je souhaite pouvoir ajouter dynamiquement des esclaves. J'ai donc des colonnes où je peux choisir le périphérique audio sur lequel diffuser et des lignes qui comporteraient un unique fichier audio à diffuser sur toute sa ligne d'esclave.

Comme une image vaut mieux qu'un long discours, voici une représentation de ce dont je souhaite :



Quels conseils pourriez-vous me donner ? Actuellement, je passe les propriétés de mon "Main_SampleLayout.qml" jusqu'au "main.qml" en faisant des "property alias" ou des "signal" pour les boutons et ensuite je ramène tout de mon "main" jusqu'au "Salve_SampleLayout" en modifiant les "property alias" de chaque sous-composant...

Je trouve que c'est fastidieux... y a t'il un moyen plus "pro" ? Pour le moment je ne sais pas créer dynamiquement en QML et donc j'ai tout écrit en dur

Exemple pour passer le volume dans mon main :

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
// ** Volume changed
            onR_sample1_volumeChanged: {
                slaveRoom1.w_sample1_volume = r_sample1_volume;
                slaveRoom2.w_sample1_volume = r_sample1_volume;
                slaveRoom3.w_sample1_volume = r_sample1_volume;
            }
            onR_sample2_volumeChanged: {
                slaveRoom1.w_sample2_volume = r_sample2_volume;
                slaveRoom2.w_sample2_volume = r_sample2_volume;
                slaveRoom3.w_sample2_volume = r_sample2_volume;
            }
            onR_sample3_volumeChanged: {
                slaveRoom1.w_sample3_volume = r_sample3_volume;
                slaveRoom2.w_sample3_volume = r_sample3_volume;
                slaveRoom3.w_sample3_volume = r_sample3_volume;
            }

J'espère que j'ai réussi à bien vous décrire mon problème. Merci pour votre aide !

[Simlock]

Re bonjour,

Bon j'ai finalement réussi à trouver une solution, je ne sais pas si c'est la meilleur mais j'arrive à faire ce que je souhaitais. Petit bémol, mon appli est un peu plus lente.

Ma solution a été d'utiliser une ListView pour afficher supprimer des composants à ma guise mais si je démarre avec 5 éléments dans ma liste, l'UI met un peu de temps à charger et si j'en rajoute, l'affichage ralentit lorsque j'utilise la scrollbar pour dérouler mes éléments...

mon qml (essai) :

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
...
ScrollView {
        id : scroll
        anchors.rightMargin: 0
        anchors.top: contener.top
        anchors.topMargin: 0
        anchors.left: contener.right
        anchors.right: parent.right
        anchors.bottom: contener.bottom
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        clip: true
        ScrollBar.horizontal.interactive: true
        ScrollBar.vertical.interactive: true
 
 
        ListModel {
            id: test
 
            ListElement {
                name:1
            }
            ListElement {
                name:1
            }
 
 
            onCountChanged: {
                if(count >= 16)
                    listView.footer = footEmpty;
                else
                    listView.footer = foot;
            }
        }
 
        Component {
            id: deleg
            SlaveRoom {
                id: slaveRoom
                width: 250
                height: scroll.height
 
                Rectangle {
                    id: rect_delete
                    width: 20
                    height: 20
                    color: "#ffffff"
 
                    MouseArea {
                        id: mouseArea_delete
                        hoverEnabled: true
                        anchors.fill: parent
 
                        onEntered: cursorShape = Qt.PointingHandCursor
 
                        onPressed: {
                            console.log ("deleted");
                        }
                    }
                }
 
                Connections {
                    target: mainRoom
                    onMain_sample1_volumeChanged: {
                        slaveRoom.slave_sample1_volume = value;
                    }
                    onMain_sample2_volumeChanged: {
                        slaveRoom.slave_sample2_volume = value;
                    }
                    onMain_sample3_volumeChanged: {
                        slaveRoom.slave_sample3_volume = value;
                    }
                    onMain_sample4_volumeChanged: {
                        slaveRoom.slave_sample4_volume = value;
                    }
                    onMain_sample5_volumeChanged: {
                        slaveRoom.slave_sample5_volume = value;
                    }
                }
            }
        }
 
        Component {
            id: foot
            Item {
                id: item_addSlave
                width: 250
                height: scroll.height
 
                Rectangle {
                    id: rectangle
                    width: 100
                    height: 100
                    anchors.horizontalCenter: parent.horizontalCenter
                    anchors.verticalCenter: parent.verticalCenter
                    opacity: 0.3
 
                    MouseArea {
                        id: mouseArea
                        hoverEnabled: true
                        anchors.fill: parent
 
                        onEntered: cursorShape = Qt.PointingHandCursor
 
                        onPressed: {
                            if (test.count < 16)
                                test.append({"name": 1})
                        }
                    }
 
                    Text {
                        id: text1
                        text: qsTr("+")
                        wrapMode: Text.NoWrap
                        elide: Text.ElideMiddle
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenter: parent.verticalCenter
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        font.pixelSize: 80
                    }
                }
 
            }
        }
 
        Component {
            id: footEmpty
            Item {}
        }
 
        ListView {
            id: listView
            width: scroll.width
            height: scroll.height
            orientation: Qt.Horizontal
            layoutDirection: Qt.LeftToRight
            contentWidth: 320
            flickableDirection: Flickable.AutoFlickDirection
            model:test
            delegate: deleg
            footer: foot
 
        }
 
    }
...

Est ce que ma manière de faire est bonne ? Y a t-il une solution ? Merci.

[Gojir4]

Bonjour,

A mon avis, l'idéal serait de gérer le ou les modèles de données du côté C++, et de n'utiliser QML que pour l'affichage.
Ensuite il ne devrait pas être nécessaire de placer une ListView dans une ScrollView. Normalement une ListView fourni déjà la possibilité de scroller. Mais peut être n'ai-je pas bien compris le design de l'interface.

[Simlock]

Merci Gojir4 pour ce détail, je comprend mieux pourquoi parfois son comportement était bancal Juste avec le ListView c'est nikel.

Je ne sais pas si c'est exactement ça que tu voulais dire mais chaque "Slave_SampleLayout" est connecté à une classe C++ qui gère la génération du son sur un périphérique, le volume, les boutons, etc...

Enfaîte, je fais juste en sorte que toutes les infos du "Main_SampleLayout" soit transmise aux "Slave_SampleLayout" avec QML. Est ce bon ?

Pour ma ListView lente, j'ai réussi à améliorer la fluidité du déroulement avec sa propriété cacheBuffer. Par contre, je ne pense pas que je puisse améliorer la vitesse de création du delegate. Le delegate qui doit charger un Slave_Room et tout ses sous-composants (Slave_SampleLayout, Classe C++ et autres...).

Mais si tu as des conseils pour optimiser les performances je suis preneur