QML使用SplitView时除最后一个子项外其余子项全部隐藏问题求解

问题原因 #

你遇到的这个问题是Qt Quick Controls 2.x版本SplitView的常见布局异常，核心诱因有两个：

1. SplitView的子项添加了冗余的锚定属性。SplitView会自主管理所有子项的尺寸与位置，你给sideBar、conversationView额外添加的anchors.top、anchors.bottom等属性会和Layout系列属性冲突，干扰SplitView的布局计算逻辑。
2. 子项的Layout属性配置不符合SplitView的布局规则：你仅给第一个子项设置了Layout.preferredWidth，第二个子项缺少显式的首选宽度声明，且Layout.fillWidth的配置冲突（第一个设为true，第二个设为false），触发了Qt Quick Controls 2.x SplitView的默认兜底逻辑：将所有可用空间分配给最后一个子项。
   如果你直接复制官方示例也能复现问题，大概率是你使用的Qt版本存在已知Bug，Qt 5.15.0的早期版本就存在SplitView初始布局计算错误的问题。

解决方案 #

核心修正点 #

• 删除所有SplitView子项上的冗余锚定声明
• 统一两个子项的Layout.fillWidth配置，均设为true
• 给第二个子项显式添加Layout.preferredWidth声明
• 可选配置SplitView.resizeMode调整拉伸逻辑

修正后的核心代码 #

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
        // 可选：拉伸模式下拖动分割条时所有子项同步调整大小
        resizeMode: SplitView.Stretch

        Rectangle {
            id: sideBar
            Layout.minimumWidth: 200
            Layout.preferredWidth: 300
            Layout.maximumWidth: 500
            Layout.fillWidth: true
            color: "#b9b9b9"
            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: true
            Layout.minimumWidth: 300
            Layout.preferredWidth: 500
            // 绑定最大宽度避免子项最小宽度总和溢出容器
            Layout.maximumWidth: splitView.width - sideBar.Layout.minimumWidth
            color: "#ff0000"
        }

    }
}

补充说明 #

如果修改代码后问题依然存在，建议将Qt版本升级到5.15.2或者更高的Qt 6.x版本，即可解决版本自带的SplitView布局Bug。

内容的提问来源于stack exchange，提问作者Chris Ray