网格布局安排答案

【问题标题】：GridLayout Arrangement网格布局安排
【发布时间】：2020-10-08 11:45:09
【问题描述】：

以下是我的 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
            }
        }
    }
}

上面的代码创建以下内容（当所有复选框都被勾选时）：
当所有复选框都被勾选时：

当复选框E3 未选中：

如果任何项目不可见，我希望项目在网格布局中重新排列。
例如。在上述未选中 E3 的情况下，我希望我的视图是这样的：

如果可以实现，请告诉我。提前致谢。

【问题讨论】：

为非常完整的问题点赞！

标签： qml qtquick2 qgridlayout

【解决方案1】：

问题是您仍然实例化Loader，您只需将sourceComponent 设置为null。您必须使项目不可见才能不使用 GridLayout 中的空间（或将宽度/高度设置为 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
                }
            }
        }
    }
}

【讨论】：