QML：SplitView 隐藏除最后一个之外的所有子项

Question

我是 QML 新手，我正在尝试用 2 个孩子实现水平拆分视图。我遇到的问题是，尽管为孩子设置了最大和最小宽度，但最后一个孩子总是占据整个拆分视图，而所有其他孩子都是隐藏的，必须手动打开。我尝试使用 Layout.maximum/minimumwidth （根本不起作用）定义最小和最大宽度，并尝试在 splitview 的第一个子项上使用 fillwidth。似乎没有任何效果。我什至从 splitview 的 qml 文档页面复制并粘贴了代码，它也做了同样的事情。这是我的代码：

import QtQuick 2.0
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.11
import "../buttons"
import "../customWidgets"

Rectangle {
    id: conversationsPage
    anchors.fill: parent
    height: 455
    width: 800

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

        Rectangle {
            id: sideBar
            Layout.minimumWidth: 200
            Layout.preferredWidth: 300
            Layout.maximumWidth: 500
            Layout.fillWidth: true
            color: "#b9b9b9"
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.topMargin: 0
            clip: true

            Rectangle {
                id: sideBarTopBar
                y: 0
                z: 2
                height: 44
                color: "#e868ff"
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.leftMargin: 0
                anchors.rightMargin: 0

                SearchBar {
                    id: conversationSearchBar
                    anchors.left: parent.left
                    anchors.right: newConversationBtn.left
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 10
                    anchors.topMargin: 10
                    anchors.leftMargin: 10
                    anchors.rightMargin: 10
                }

                IconBtn {
                    id: newConversationBtn
                    width: 35
                    height: 35
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    btnIconSource: "../images/icons/plus.svg"

                }
            }

            ScrollView {
                id: conversationsListScroll
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: sideBarTopBar.bottom
                anchors.bottom: parent.bottom
                z: 1
                anchors.topMargin: 0

                ColumnLayout {
                    id: conversationListLayout
                    x: 0
                    y: 0
                    width: conversationsListScroll.width
                    clip: true

                    ConversationTab {
                        Layout.fillWidth: true

                    }

                    ConversationTab {
                        Layout.fillWidth: true
                    }

                    ConversationTab {
                        Layout.fillWidth: true
                    }

                    ConversationTab {
                        Layout.fillWidth: true
                    }

                    ConversationTab {
                        Layout.fillWidth: true
                    }

                    ConversationTab {
                        Layout.fillWidth: true
                    }

                    ConversationTab {
                        Layout.fillWidth: true
                    }
                }
            }
        }

        Rectangle {
            id: conversationView
            Layout.fillWidth: false
            Layout.minimumWidth: 300
            Layout.maximumWidth: 500
            color: "#ff0000"
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.topMargin: 0
            anchors.bottomMargin: 0
        }

    }

你们知道为什么拆分视图没有按我想要的方式工作吗？

Answer 1

我注意到了几件事，首先，在 Quick Controls 2 的 SplitView 中，您必须使用 SplitView 附加属性而不是 Layout 附加属性。

其次，我还注意到您在SplitView 的直接子代中指定了anchors，它们没有任何作用，可以删除。我不确定，但似乎SplitView.fillWidth: true 的孩子不应该设置最大宽度，因为两个孩子都有最大宽度可以防止SplitView 完全填充其父Rectangle（你可能仍然有使用这种情况，但我出于这个原因将其删除）。

以下是包含这些建议的代码：

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

        Rectangle {
            id: sideBar
            SplitView.minimumWidth: 200
            SplitView.preferredWidth: 300
            SplitView.fillWidth: true
            color: "#b9b9b9"
            clip: true

            // children here...
        }

        Rectangle {
            id: conversationView
            SplitView.fillWidth: false
            SplitView.minimumWidth: 300
            SplitView.maximumWidth: 500
            color: "#ff0000"
        }
    }