如何实现三个或更多元素的QML SplitView

Question

我正在尝试使用 PyQt6 来构建桌面应用程序。我需要构建一个包含三个逻辑部分的 UI 演示文稿，这些逻辑部分可以通过水平轴调整大小。看起来 SplitView 是实现我的目标的完美组件。不幸的是我无法让它按预期工作。

我在 Qt 版本 5 的官方文档中找到了一个简单示例，它描述了我正在寻找的确切 UI 结果。

所以我决定复用Qt版本6下的代码

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts

ApplicationWindow {
    height: 600
    visible: true
    width: 1200

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

        Rectangle {
            Layout.maximumWidth: 400
            color: "lightblue"
            width: 200

            Text {
                anchors.centerIn: parent
                text: "View 1"
            }
        }
        Rectangle {
            id: centerItem

            Layout.fillWidth: true
            Layout.minimumWidth: 50
            color: "lightgray"

            Text {
                anchors.centerIn: parent
                text: "View 2"
            }
        }
        Rectangle {
            color: "lightgreen"
            width: 200

            Text {
                anchors.centerIn: parent
                text: "View 3"
            }
        }
    }
}

但我得到了不同的结果

看起来前两部分宽度被压缩为 0

有什么想法吗？

Answer 1

要有效地使用

SplitView

，您应该获取

SplitView

附加属性的句柄，例如

SplitView.preferredWidth

、

SplitView.fillWidth

和

SplitView.fillHeight

。应删除所有其他尺寸，例如

width

、

Layout.fillWidth

，例如

import QtQuick
import QtQuick.Controls
Page {
    title: "SplitView Demo"
    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"
            }
        }
    }
}

您可以在线尝试！

[编辑：哦，我看到 @eyllanesc 实际上在 7 小时前就有了这个答案]