QML Grid 使用 SplitView 上下拖动行，左右拖动列？

Question

我想最终创建一个有 2 行和 9 列的网格，然后在其中一些单元格中，我想将它们拆分为在其中包含不同的项目等。

在这里，我的网格只有 2 行和 1 列，并且我在顶行中使用了 SplitView 来显示可以拖动的 3 列。我希望也能够将其用于行，以便它们也可以上下拖动。是否可以使用 2 个 SplitView - 1 个用于行，1 个用于列？或者有更好的解决方案吗？我最终还希望其中一列具有固定大小，但其他列是窗口的默认百分比大小并且可以调整大小。

这是我目前的代码，我喜欢它的外观，但我希望能够通过上下拖动来调整行高的大小。不确定 SplitView 是否是最好的方法：

Rectangle {
    id: root
    height: 400
    width: 600

    Grid {
        columns: 1
        rows: 2

        Row {

            Rectangle {
                   width: root.width
                   height: root.width * 0.5

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

                    PinkRect {
                    width: 200
                    Layout.maximumWidth: 400
                    }
                    PurpleRect {
                    Layout.minimumWidth: 50
                    Layout.fillWidth: true
                    }
                    OrangeRect {
                    width: 200
                    }
                }
            }
        }
        Row {
            BrownRect {
                width: root.width
                height: root.width * 0.5
            }
        }
    }
}

Answer 1

你可以嵌套

SplitViews

:

Window {
id: root
visible: true
width: 800
height: 600
title: "Test app"

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

    SplitView {
        orientation: Qt.Horizontal
        SplitView.minimumWidth: 150
        SplitView.minimumHeight: 150

        Rectangle {
            color: "red"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
        Rectangle {
            color: "green"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
        Rectangle {
            color: "blue"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
    }

    SplitView {
        orientation: Qt.Horizontal
        SplitView.minimumWidth: 150
        SplitView.minimumHeight: 150

        Rectangle {
            color: "blue"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
        Rectangle {
            color: "green"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
        Rectangle {
            color: "red"
            SplitView.minimumWidth: 150
            SplitView.minimumHeight: 150
        }
    }

}
}