GridLayout Arrangement

Question

Following is my main.qml:

Window {
    id: window
    visible: true
    width: 800
    height: 480
    title: qsTr("Hello World")
    ListModel {
        id: _listModel
        ListElement {
            textData: "E1"
            isEnabled: false
        }
        ListElement {
            textData: "E2"
            isEnabled: false
        }
        ListElement {
            textData: "E3"
            isEnabled: false
        }
        ListElement {
            textData: "E4"
            isEnabled: false
        }
        ListElement {
            textData: "E5"
            isEnabled: false
        }
        ListElement {
            textData: "E6"
            isEnabled: false
        }
    }

    ListView {
        id: _listview
        model: _listModel
        width: 100
        height: parent.height
        anchors.right: parent.right
        delegate: Item {
            width: parent.width
            height: 50
            anchors.right: parent.right
            Component.onCompleted:
            {
                if (isEnabled)
                    visibleRecs++;
            }

            RowLayout {
                Text {
                    id: itemText
                    text: qsTr(textData)
                }
                CheckBox {
                    height: 30
                    width: height
                    checked: isEnabled
                    onCheckedChanged: {
                        isEnabled = checked
                    }
                }
            }
        }
    }

    ScrollView {
        id: _scrollView
        width: parent.width / 2
        height: parent.height
        clip: true
        GridLayout {
            id: _gridLayout
            anchors.fill: parent
            anchors.horizontalCenter: parent.horizontalCenter
            columnSpacing: 10
            rowSpacing: 10
            columns: 2

            Repeater {
                model: _listModel
                Loader {
                    id: _loader
                    sourceComponent: isEnabled ? _recComponent : null
                    onLoaded: {
                        item.text = textData
                    }
                }
            }
        }
    }



    Component {
        id: _recComponent
        Rectangle {
            property alias text : _txt.text
            id: _rec
            width: 100
            height: 50
            radius: 5
            color: "yellow"
            Text {
                id: _txt
                anchors.centerIn: parent
            }
        }
    }
}

The above code creates following (when all check boxes are ticked):
When all checkboxes are ticked:


When checkbox E3 is unchecked:

I want the items to be rearranged in the gridlayout if any of the item goes invisible.
E.g. in the above case when E3 is unchecked, I want my view to be something like this:

Please let me know, if it is possible to achieve. Thanks in advance.

Answer 1

The problem is that you still instantiate the Loader, you just set the sourceComponent to null. You have to make the item invisible to not use space in the GridLayout (or put width/height to 0)

ScrollView {
    id: _scrollView
    width: parent.width / 2
    height: parent.height
    clip: true
    GridLayout {
        id: _gridLayout
        anchors.fill: parent
        anchors.horizontalCenter: parent.horizontalCenter
        columnSpacing: 10
        rowSpacing: 10
        columns: 2

        Repeater {
            model: _listModel
            Loader {
                id: _loader
                visible: isEnabled
                sourceComponent: isEnabled ? _recComponent : null
                onLoaded: {
                    item.text = textData
                }
            }
        }
    }
}