QML: SplitView hides all children except last-CodePudding

I am new to QML and I am trying to implement a horizontal splitview with 2 children. The problem that I am having is that despite setting maximum and minimum widths for the children, the last child always takes up the entire split view and all the others are hidden and have to be manually opened. I have tried defining minimum and maximum widths using Layout.maximum/minimumwidth (which dont work at all) and have tried using fillwidth on the first child of the splitview. Nothing seems to work. I even copied and pasted the code from the qml doc page from splitview and it did the same thing. Here is my code:

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
        }

    }

Do you guys have any idea why the split view isnt working the way I want it to?

CodePudding user response：

I noticed a couple of things, first, in SplitView from Quick Controls 2, you must use the SplitView attached property instead of the Layout attached property.

Secondarily, I also noticed that you have anchors specified inside the direct children of the SplitView, which have no effect and can be removed. I am not sure, but it seems like the child with SplitView.fillWidth: true should not have a maximum width set, as both children having maximum widths can prevent the SplitView from filling its parent Rectangle fully (you may still have a use case for this, but I removed it for this reason).

Here is the code with these recommendations:

    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"
        }
    }