Manage part of the window with a stackview within splitview - qt

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