QML: SplitView隐藏除last之外的所有子元素

Question

我是QML的新手，我正试图实现一个有2个孩子的水平分屏视图。我遇到的问题是，尽管为孩子设置了最大和最小宽度，但最后一个孩子总是占用整个分屏视图，所有其他的都隐藏起来，必须手动打开。我尝试使用布局定义最小和最大宽度。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

我注意到一些事情，首先，在快速控制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"
}
}