Qt qml StackView and GridView and Loader

Qt qml StackView and GridView

main: loader component

//main.qml
import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.0

Window {
    id: root
    width: 800
    height: 480
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        id: mainBackGround
        anchors.centerIn: parent
        width: 580
        height: 360
        color: "lightGray"
        clip: true

        Loader{
            id: mainLoader
            anchors.leftMargin: 20
            anchors.topMargin: 20
            anchors.top: mainBackGround.top
            anchors.left: mainBackGround.left
            anchors.right: mainBackGround.right
            anchors.bottom: mainBackGround.bottom
            source: "StackViewPage.qml"
        }
    }
}

stack view component: StackViewPage.qml

//StackViewPage.qml
import QtQuick 2.0
import QtQuick.Controls 2.12

Item {
    anchors.fill: parent
    StackView{
        id: stackView
        anchors.fill: parent
        initialItem: "GridOne.qml"
    }
}

stack view Page one : GridOne.qml

//GridOne.qml
import QtQuick 2.0
import QtQml.Models 2.15
import QtQuick.Controls 2.12

Item {
    ListModel{
        id: listModel
        ListElement { name: "One"; page: "StationPage.qml"}
        ListElement { name: "Two"; page: ""}
        ListElement { name: "Three"; page: ""}
        ListElement { name: "Four"; page: ""}
        ListElement { name: "Five"; page: ""}
        ListElement { name: "Six"; page: ""}
        ListElement { name: "Seven"; page: ""}
        ListElement { name: "Eight"; page: ""}
    }

    GridView{
        id: gridView
        anchors.fill: parent
        model: listModel
        cellHeight: 140
        cellWidth: 140
        delegate: Rectangle{
            width: 120
            height: 120
            color: "grey"
            radius: 5
            Text{
                color: "white"
                text: name
                anchors.centerIn: parent
            }
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    if(index === 0){
                        mainLoader.source = page
                    }
                }
            }
        }
    }

    Button{
        id: nextButton
        anchors{
            right: parent.right
            bottom: parent.bottom
            margins: 20
        }

        text: "Next"
        onClicked: stackView.push("GridTwo.qml")
    }

    Button{
        id: previousButton
        anchors{
            right: nextButton.left
            margins: 10
            verticalCenter: nextButton.verticalCenter
        }

        text: "Previous"
    }
}

stack view Page two: GridTwo.qml

//GridTwo.qml
import QtQuick 2.0
import QtQml.Models 2.15
import QtQuick.Controls 2.12

Item {
    ListModel{
        id: listModel
        ListElement { name: "001"; page: ""}
        ListElement { name: "002"; page: ""}
        ListElement { name: "003"; page: ""}
        ListElement { name: "004"; page: ""}
        ListElement { name: "005"; page: ""}
        ListElement { name: "006"; page: ""}
        ListElement { name: "007"; page: ""}
        ListElement { name: "008"; page: ""}
    }

    GridView{
        id: gridView
        anchors.fill: parent
        model: listModel
        cellHeight: 140
        cellWidth: 140
        delegate: Rectangle{
            width: 120
            height: 120
            color: "grey"
            radius: 5
            Text{
                color: "white"
                text: name
                anchors.centerIn: parent
            }
        }
    }

    Button{
        id: nextButton
        anchors{
            right: parent.right
            bottom: parent.bottom
            margins: 20
        }

        text: "Next"
    }

    Button{
        id: previousButton
        anchors{
            right: nextButton.left
            margins: 10
            verticalCenter: nextButton.verticalCenter
        }

        text: "Previous"
        onClicked: stackView.push("GridOne.qml")
    }
}

supplement

//StationPage.qml
import QtQuick 2.0

Item {
    anchors.fill: parent
    Rectangle{
        anchors.fill: parent
        color: "blue"
        Text{
            text: "Test"
            font.pixelSize: 48
            font.bold: true
            anchors.centerIn: parent
            color: "lightgray"
        }

        MouseArea{
            anchors.fill: parent
            onClicked: mainLoader.source = "StackViewPage.qml"
        }
    }
}

效果

stackViewAndGridViewAndLoader