Solved Random Customs controls in a row.
-
Hello, I have a requirement where it is required to show controls with equally height in a fixed size row.
The controls can be random based on my 7 different conditions for e.g A,B,C ,D,E,F,G,H,I are the controls thenCondition 1
A,B,C,D,ECondition 2
A,E,C,FCondition 3
B,C,F,Hlike this. Now because of number of permutation and combinations it is impossible to use the QML states there. The number of states will be increased and it becomes a mess. Is there any other way this can be handled.?
-
Okay, I see the problem. You will have to get creative with loaders and things repeaters:
import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12 Window { visible: true width: 800 height: 600 title: qsTr("Item Ordering") Component { id: itemA Text { width: 100 height: 20 text: "itemA" } } Component { id: itemB Text { width: 100 height: 20 text: "itemB" } } Component { id: itemC Text { width: 100 height: 20 text: "itemC" } } Component { id: itemD Text { width: 100 height: 20 text: "itemD" } } Component { id: itemE Text { width: 100 height: 20 text: "itemE" } } Component { id: itemF Text { width: 100 height: 20 text: "itemF" } } Component { id: itemG Text { width: 100 height: 20 text: "itemG" } } Component { id: itemH Text { width: 100 height: 20 text: "itemH" } } Column { Row { Button { text: "Condition 1" onClicked: mainrow.state = "Condition1" } Button { text: "Condition 2" onClicked: mainrow.state = "Condition2" } Button { text: "Condition 3" onClicked: mainrow.state = "Condition3" } Button { text: "Condition None" onClicked: mainrow.state = "" } } Row { id: mainrow property var loaded: [] onLoadedChanged: console.log(loaded) states: [ State { name: "Condition1" PropertyChanges { target: mainrow loaded: [itemA,itemB,itemC,itemD,itemE] } }, State { name: "Condition2" PropertyChanges { target: mainrow loaded: [itemA,itemE,itemC,itemF] } }, State { name: "Condition3" PropertyChanges { target: mainrow loaded: [itemB,itemC,itemF,itemH] } } ] Repeater { model: mainrow.loaded.length delegate: Loader { sourceComponent: mainrow.loaded[index] } } } } }
-
Row { Item { id: control_a visible: control_a_enabled } Item { id: control_b visible: control_b_enabled } // etc }
-
Okay, I see the problem. You will have to get creative with loaders and things repeaters:
import QtQuick 2.12 import QtQuick.Window 2.12 import QtQuick.Controls 2.12 Window { visible: true width: 800 height: 600 title: qsTr("Item Ordering") Component { id: itemA Text { width: 100 height: 20 text: "itemA" } } Component { id: itemB Text { width: 100 height: 20 text: "itemB" } } Component { id: itemC Text { width: 100 height: 20 text: "itemC" } } Component { id: itemD Text { width: 100 height: 20 text: "itemD" } } Component { id: itemE Text { width: 100 height: 20 text: "itemE" } } Component { id: itemF Text { width: 100 height: 20 text: "itemF" } } Component { id: itemG Text { width: 100 height: 20 text: "itemG" } } Component { id: itemH Text { width: 100 height: 20 text: "itemH" } } Column { Row { Button { text: "Condition 1" onClicked: mainrow.state = "Condition1" } Button { text: "Condition 2" onClicked: mainrow.state = "Condition2" } Button { text: "Condition 3" onClicked: mainrow.state = "Condition3" } Button { text: "Condition None" onClicked: mainrow.state = "" } } Row { id: mainrow property var loaded: [] onLoadedChanged: console.log(loaded) states: [ State { name: "Condition1" PropertyChanges { target: mainrow loaded: [itemA,itemB,itemC,itemD,itemE] } }, State { name: "Condition2" PropertyChanges { target: mainrow loaded: [itemA,itemE,itemC,itemF] } }, State { name: "Condition3" PropertyChanges { target: mainrow loaded: [itemB,itemC,itemF,itemH] } } ] Repeater { model: mainrow.loaded.length delegate: Loader { sourceComponent: mainrow.loaded[index] } } } } }