在 splitview 中使用 stackview 管理窗口的一部分

Question

我用两级拆分视图设计了我的主界面，以获得五个矩形区域。

这是我的代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import "../geoforms"


SplitView {
    id: splitView0
    orientation: Qt.Horizontal
//        anchors.fill: parent

    SplitView {
        id: splitView1
        width:  window.width/10*8
        height: 900
        Layout.minimumWidth: window.width/10*2
        Layout.maximumWidth: window.width/10*8
        orientation: Qt.Vertical

        MapRectangle{
            id:newMapRectangle
            height: 300
            width: 700

            anchors.top: parent.top
            anchors.left:parent.left
            anchors.right: parent.right

            Layout.fillHeight: true
        }


        FPArea{
            id: flightPlanArea
        }
    }

    SplitView {
        id: splitView2
        width: 100
        height: 100
        orientation: Qt.Vertical

        FPMap{
            id: newFlightPlanMap
        }

        AltitudePM{
            id: newAltitudePlanMap
        }

        IME{
            id: newButtonArea
            color: "grey"
            mainGridProp.rows : 3
            mainGridProp.columns: 2
            mainGridProp.spacing: 20
        }

    } //Splitview2
} //Splitview

我需要管理 splitview1.MapRectangle 区域的堆栈视图。为此，我在代码中添加了一个 stackview，如下所示：

import QtQuick 2.0
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4


Item{
    id: itemMapRectangle

    Rectangle {
        id: mapRect
        color: "#4c4e50"
        border.color: "#404244"
        border.width: 3
    }

    StackView{
        id: stackView
        anchors.fill: parent
        focus: true
        initialItem: Item {
            id: page
        }
    }
}

结果很奇怪。

此外，文档说：“在应用程序中使用 StackView 通常很简单，只需将 StackView 添加为 Window 的子项即可。”。所以我担心stackview只能绑定到一个窗口。

有没有办法通过 splitview 将它链接到窗口的一部分？如果是，是否可以为界面的不同区域设置多个堆栈视图？

Answer 1

SplitView 与所有其他 QML 控件一样是常规控件，因此您可以根据需要设置大小/锚点。但是SplitView 实现了Layout 的附加属性，因此您应该使用它的属性来设置内部元素的大小。例如：

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

    StackView {
        Layout.fillHeight: true
        Layout.minimumWidth: 200
        initialItem: Rectangle {
            color: "orange"
        }            
    }

    StackView {
        Layout.fillHeight: true
        Layout.fillWidth: true
        initialItem: Rectangle {
            color: "yellow"
        }            
    }
}