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

Question

我是 QML 的新手，我正在尝试使用 2 children 实现水平拆分视图。我遇到的问题是，尽管为 children 设置了最大和最小宽度，但最后一个 child 总是占据整个拆分视图，而所有其他的都被隐藏，必须手动打开。我已经尝试使用 Layout.maximum/minimumwidth 定义最小和最大宽度（根本不起作用），并尝试在 splitview 的第一个 child 上使用 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的直接children里面指定了anchors，没有效果，可以去掉。我不确定，但似乎 child 和 SplitView.fillWidth: true 不应该设置最大宽度，因为两个 children 都具有最大宽度可以防止 SplitView 填充它 parent 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"
        }
    }

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

QML: SplitView hides all children except last

qt

qml