如何用SplitView实现QML Grid行列拖拽调整及复杂网格构建？

问题概述 #

• 目标创建2行9列网格，部分单元格需拆分；
• 当前已实现2行1列Grid，顶部行通过水平SplitView完成3列可拖拽调整；
• 需新增行的上下拖拽调整功能，询问是否可嵌套SplitView（行+列），或有无更优方案；
• 要求其中一列固定尺寸，其余列默认按窗口百分比分配且可调整；
• 对当前代码外观满意，需实现行高拖拽，不确定SplitView是否为最佳选择。

解决方案：嵌套SplitView是最优方案 #

在Qt中，嵌套SplitView是实现行列双向拖拽调整的常规且高效的方案，完全满足你的需求，逻辑清晰且易于扩展到后续的9列及单元格拆分需求。

核心思路 #

1. 外层用垂直SplitView替代原有的Grid，实现两行之间的垂直拖拽调整；
2. 内层保留水平SplitView，处理列的水平拖拽调整；
3. 通过Layout属性控制固定列、自适应列的行为：
   • 固定列：设置具体宽度（如width: 200），不设置Layout.fillWidth: true，可搭配Layout.lock: true禁止拖拽（可选）；
   • 自适应列：设置Layout.fillWidth: true，SplitView会自动按比例分配剩余空间，窗口大小变化时同步调整；
4. 可通过Layout.preferredHeight/Width设置初始比例，Layout.minimum/MaximumHeight/Width限制调整范围。

修改后的代码示例 #

Rectangle {
    id: root
    height: 400
    width: 600

    // 外层垂直SplitView：实现两行的拖拽调整
    SplitView {
        anchors.fill: parent
        orientation: Qt.Vertical

        // 第一行：包含水平SplitView处理列拖拽
        Rectangle {
            // 初始高度占窗口50%，可拖拽调整
            Layout.preferredHeight: root.height * 0.5
            // 限制行高调整范围
            Layout.minimumHeight: 100
            Layout.maximumHeight: 300

            SplitView {
                anchors.fill: parent
                orientation: Qt.Horizontal

                // 固定宽度列：200px，最大可拖到400px
                PinkRect {
                    width: 200
                    Layout.maximumWidth: 400
                    // 不设置Layout.fillWidth，保持固定尺寸基础上可拖拽调整
                }
                // 自适应列：默认占剩余空间，最小宽度50px
                PurpleRect {
                    Layout.minimumWidth: 50
                    Layout.fillWidth: true
                }
                // 固定宽度列：200px
                OrangeRect {
                    width: 200
                }
            }
        }

        // 第二行
        BrownRect {
            Layout.preferredHeight: root.height * 0.5
            Layout.minimumHeight: 100
        }
    }
}

扩展说明 #

• 后续扩展到9列时，直接在水平SplitView中添加更多item即可，如需拆分单元格，可在对应item中再嵌套SplitView（水平或垂直）；
• 若需要某列完全固定不可拖拽，可给该item添加Layout.lock: true；
• 行高/列宽的初始比例可通过Layout.preferred*灵活设置，适配不同需求。

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