Question

我设计了具有两级splitview的主界面，以获得五个矩形区域。

这是我的代码：

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

结果很奇怪。

此外，文档说：＆＃34;在应用程序中使用StackView通常是将StackView添加为Window的子项的简单问题。＆＃34;。因此，我担心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"
        }            
    }
}

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

1 个答案: