使用 splitview 中的堆栈视图管理 window 的一部分

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 区域的堆栈视图。为此，我在代码中添加了一个堆栈视图，如下所示：

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

结果很奇怪。

此外，文档说："Using StackView in an application is typically a simple matter of adding the StackView as a child of a Window."。所以我担心 stackview 只能绑定到 window。

有没有办法通过 splitview link 它成为 window 的一部分？如果是，是否可以为界面的不同区域设置多个堆栈视图？

Answer 1

SplitView 与所有其他 QML 控件一样是常规控件，因此您可以根据需要设置 size/anchors。但是 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"
        }            
    }
}

使用 splitview 中的堆栈视图管理 window 的一部分

Manage part of the window with a stackview within splitview

qt

qml

stackview