qml 页面切换

在Qt Quick (QML) 中，页面切换（或视图切换）通常通过几种不同的方式实现，具体取决于你的应用结构和需求。以下是几种常见的页面切换方式：

1. 使用 StackView

StackView 是QML中用于管理页面（或称为视图）堆栈的组件。它允许你通过push和pop操作来添加和移除视图。这种方式非常适合于需要导航历史（如用户可以从一个页面回到前一个页面）的应用。

//main.qml
Window  {
    id: id_root
    visible: true
    width: 200
    height: 200

    StackView {
        id: stackView
        anchors.fill: parent

        initialItem: MainPage{}
    }
}

//MainPage.qml
Page {
    width: 200
    height: 200

    Button {
        text: "Go to Next Page"
        onClicked: stackView.push(secondView)
    }


    Component {
        id: secondView
        SecondPage{

        }
    }
}

//SecondPage.qml
Page {
    width: 200
    height: 200
    Button {
        text: "Go Back"
        onClicked: stackView.pop()
    }
}

2. 使用 Loader

Loader 组件可以按需加载和卸载 QML 文件，非常适合于较为简单的页面切换需求。

//main.qml
Window  {
    id: id_root
    visible: true
    width: 200
    height: 200

    Loader {
        id: pageLoader
        anchors.fill: parent
        source: "MainPage.qml" // Initial page
        onLoaded: {
            console.log("loaded")
            pageLoader.item.sigSwitchPage.connect(pageLoader.slotSwitchPage)
        }

        function slotSwitchPage(page){
            pageLoader.source = page
        }
    }
}


//MainPage.qml
Rectangle {
    id: id_page
    width: 1920
    height: 720

    signal sigSwitchPage(string page)

    Button {
        text: "Go to Next Page"
        onClicked: {
            console.log("click")
            id_page.sigSwitchPage("qrc:/SecondPage.qml")
        }
    }
}

//SecondPage.qml
Rectangle {
    width: 1920
    height: 720

    signal sigSwitchPage(string page)

    Button {
        text: "Go Back"
        onClicked: {
            sigSwitchPage("qrc:/MainPage.qml")
        }
    }
}

3. 使用Qt.createComponent

Qt.createComponent 是一个强大的功能，可以动态创建 QML 组件。它常用于在运行时创建和管理组件的实例。

//main.qml
Window  {
    id: id_root
    visible: true
    width: 200
    height: 200

    Button {
        text: "Go to Next Page"
        onClicked: {
            createImageObject("qrc:/SecondPage.qml")
        }
    }

    property Component component: null;
    function createImageObject(qml) {
        component = Qt.createComponent(qml);
        if (component.status === Component.Ready || component.status === Component.Error)
            finishCreation();
        else
            component.statusChanged.connect(finishCreation);
    }
    function finishCreation() {
        if (component.status === Component.Ready){
            var image = component.createObject(id_root);
            if (image === null)
                console.log("Error creating image");
        }
        else if (component.status === Component.Error)
            console.log("Error loading component:", component.errorString());
    }
}

qq群交流：698593923

觉得有帮助的话，打赏一下呗。。