Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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 then

    Condition 1
    A,B,C,D,E

    Condition 2
    A,E,C,F

    Condition 3
    B,C,F,H

    like 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]
                    }
                }
            }
        }
    }
    

Log in to reply