QML 布局内的 Splitview 无法正常工作

Question

我无法在布局内实现拆分视图。 当我尝试拖动时，屏幕返回到最小分屏宽度。 但如果没有布局，我可以正确拖动和分割视图

ColumnLayout {
    anchors.fill: parent
    spacing: 20

    RowLayout {
        spacing:20
        height: 500
 
         SplitView {
            anchors.fill: parent
            orientation: Qt.Horizontal
                Rectangle {
                    SplitView.preferredWidth: 200
                    SplitView.fillHeight: true
                    color: "lightblue"
                    Text {
                        anchors.centerIn: parent
                        text: "View 1"
                    }
                }
                Rectangle {
                    id: centerItem
                    SplitView.preferredWidth: 200
                    SplitView.fillHeight: true
                    color: "lightgray"
                    Text {
                        anchors.centerIn: parent
                        text: "View 2"
                    }
                }
                Rectangle {
                    SplitView.fillWidth: true
                    SplitView.fillHeight: true
                    color: "lightgreen"
                    Text {
                        anchors.centerIn: parent
                        text: "View 3"
                    }
                }
           }
           
        }
    }

Answer 1

错误出现在 SplitView

anchors.fill: parent

。

SplitView 组件是 RowLayout 的子组件，这意味着它的大小必须使用

Layout

附加属性进行管理，而不是显式设置。锚点设置项目大小和位置。

用 anchors.fill: parent

 替换 

SplitViewLayout.fillWidth: true; Layout.fillHeight: true

低于您按预期工作的代码

ColumnLayout {
    anchors.fill: parent // Ok if its parent is not a Layout item
    spacing: 20

    RowLayout {
        spacing:20
        Layout.preferredHeight: 500 // Okay
 
         SplitView {
            Layout.fillWidth: true // Okay
            Layout.fillHeight: true // Okay
            orientation: Qt.Horizontal
                Rectangle {
                    SplitView.preferredWidth: 200
                    SplitView.fillHeight: true
                    color: "lightblue"
                    Text {
                        anchors.centerIn: parent
                        text: "View 1"
                    }
                }
                Rectangle {
                    id: centerItem
                    SplitView.preferredWidth: 200
                    SplitView.fillHeight: true
                    color: "lightgray"
                    Text {
                        anchors.centerIn: parent
                        text: "View 2"
                    }
                }
                Rectangle {
                    SplitView.fillWidth: true
                    SplitView.fillHeight: true
                    color: "lightgreen"
                    Text {
                        anchors.centerIn: parent
                        text: "View 3"
                    }
                }
           }
           
        }
    }

参考：Qt 布局 QML 类型