Random Customs controls in a row.

Makarand_EB

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

fcarney

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

fcarney

Row {
  Item {
    id: control_a
    visible: control_a_enabled
  }
  Item {
    id: control_b
    visible: control_b_enabled
  }
  // etc
}

fcarney

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