Manage part of the window with a stackview within splitview

Question

I designed my main interface with two levels of splitview in order to get five rectangle areas.

Here is my code :

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

I need to manage a stackview for the splitview1.MapRectangle area. For that, I added a stackview in the code, like this :

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

The result is weird.

Furthermore, documentation says : "Using StackView in an application is typically a simple matter of adding the StackView as a child of a Window.". So I'm afraid stackview to be only bindable to a window.

Is there a way to link it to part of a window via a splitview ? If yes, is it possible to have multiple stackview for different areas of the interface ?

Answer 1

SplitView is a regular control as all other QML controls so you can set size/anchors as you want. But SplitView implements attached properties of Layout so you should use its properties to set size of inner elements. For example:

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