如何在GridLayout中设置组件行列？动态绑定属性无效问题

问题核心在于GridLayout的布局附加属性（Layout.row、Layout.column）只对它的直接子项生效。你当前的代码里，Repeater生成的Loader是GridLayout的直接子元素，但你把Layout属性写在了Loader内部加载的Rectangle上，相当于隔了一层，GridLayout根本识别不到这些设置，自然不会生效。

解决步骤及修改后代码 #

• 将Layout.row和Layout.column直接绑定在Loader上，使用modelData里的row和col动态值
• 内部的test_a、test_b、test_c组件仅负责自身样式，无需写死布局位置

Item {
    id: root
    property var xdata: [
        {"row": 1, "col": 1, "type": "A"},
        {"row": 2, "col": 2, "type": "B"},
        {"row": 3, "col": 3, "type": "C"}
    ]

    GridLayout {
        id: grid
        width: 300
        height: 300
        rows: 3
        columns: 3

        Repeater {
            model: root.xdata
            delegate: Loader {
                // 直接在Loader（GridLayout直接子项）上绑定布局位置
                Layout.row: modelData.row
                Layout.column: modelData.col
                // 根据type加载对应组件
                sourceComponent: switch(modelData.type) {
                    case "A": return test_a
                    case "B": return test_b
                    case "C": return test_c
                }
            }
        }

        Component {
            id: test_a
            Rectangle { 
                width: 100
                height: 100
                color: "red" 
            }
        }

        Component {
            id: test_b
            Rectangle {
                width: 100
                height: 100
                color: "green"
            }
        }

        Component {
            id: test_c
            Rectangle {
                width: 100
                height: 100
                color: "blue"
            }
        }
    }
}

补充说明 #

修改后GridLayout能直接读取到Loader的Layout属性，会将每个Loader放到指定的行和列位置。同时内部组件无需关心布局逻辑，复用性更强——后续如需调整位置，仅修改xdata数组中的row/col值即可，无需改动组件代码。

内容的提问来源于stack exchange，提问作者kjub