QML 界面切换的几种方法(带示例代码)

时间:2024-03-06 07:10:35

QML 开发客户端应用,避不可免要进行界面切换,例如从登录界面跳转到主界面。网上看了下多篇博客,都比较简陋不是很详细,不太好进行参考,所以决定自己参考这些博客,总结一下几种界面切换的方法。

先看下效果:


静态

一、隐藏法

本质上各页面都存在,只是某些隐藏,某些显示,当某一触发条件满足时,设置对应页面的显示和隐藏。

main.qml
------------------------------------
import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    // 主页面一开始设置"隐藏",登录成功后才显示
    MainPage {
        id: mainPage
        width: 500
        height: 350
        visible: false // 设置"隐藏"
        anchors.centerIn: parent
    }

    LoginPage {
        id: loginPage
        width: 300
        height: 200
        anchors.centerIn: parent
    }
}

LoginPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    width: 400
    height: 300
    color: "#051f58"
    radius: 8

    Button {
        text: "登录页面-登录按钮"
        anchors.centerIn: parent
        onClicked: {
            loginPage.visible = false
            mainPage.visible = true
        }
    }
}

MainPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    color: "#498ff8"
    radius: 8

    Button {
        text: "主页面-返回按钮"
        anchors.centerIn: parent
        onClicked: {
            loginPage.visible = true
            mainPage.visible = false
        }
    }
}

二、利用 StackView、SwipeView

参考:Qt Quick之StackView详解(1)

动态

一、使用Loader动态加载QML组件

Loader 元素用来动态加载可见的 QML 组件,它可以加载一个 QML 文件(使用 source 属性)或者一个组件对象(使用 sourceComponent 属性)。
代码如下:

main.qml
------------------------------------
import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    // 1. Loader加载不同组件,实现切换页面的功能
    Loader{
        id:myLoader
        anchors.centerIn: parent // 弹出的界面都居中显示
    }
    Component.onCompleted: myLoader.sourceComponent = loginPage // 一开始显示登录页面

    // 2. 登录页面-Component
    Component{
        id:loginPage
        LoginPage {
            width: 300
            height: 200
            anchors.centerIn: parent
        }
    }

    // 3.主页面-Component
    Component{
        id:mainPage
        MainPage {
            width: 500
            height: 350
            anchors.centerIn: parent
        }
    }
}

LoginPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    width: 400
    height: 300
    color: "#051f58"
    radius: 8

    Button {
        text: "登录页面-登录按钮"
        anchors.centerIn: parent
        onClicked: myLoader.sourceComponent = mainPage // 切换显示主页面
    }
}

MainPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    color: "#498ff8"
    radius: 8

    Button {
        text: "主页面-返回按钮"
        anchors.centerIn: parent
        onClicked: myLoader.sourceComponent = loginPage // 切换显示登录页面
    }
}

二、利用 createComponent 创建并切换

main.qml
------------------------------------
import QtQuick 2.9
import QtQuick.Window 2.2

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

    LoginPage {
        width: 300
        height: 200
        anchors.centerIn: parent
    }
}

LoginPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    id: loginPage
    width: 400
    height: 300
    color: "#051f58"
    radius: 8
    clip:true

    Button {
        text: "登录页面-登录按钮"
        anchors.centerIn: parent
        onClicked: {
            // 隐藏登录页面
            loginPage.visible = false // 不能销毁,否则下面的"主页面"也会跟随销毁,则后面
            // 点击"主页面-关闭按钮",将无法销毁关闭"主页面"

            // 在主窗口(mainWin)上显示主页面
            var compMainPage = Qt.createComponent("MainPage.qml")
            .createObject(mainWin, {x:50, y:50, width:200, height:250});
        }
    }
}

MainPage.qml
------------------------------------
import QtQuick 2.0
import QtQuick.Controls 2.3

Rectangle {
    id: mainPage
    color: "#498ff8"
    radius: 8

    Button {
        text: "主页面-关闭按钮"
        anchors.centerIn: parent
        onClicked: {
            // 销毁关闭主页面
            mainPage.destroy()
        }
    }
}

使用compLogin.destroy()来销毁登录页面以达到关闭的效果,同时节省内存。

使用场景分析

如果想记录上一页的操作,可以使用静态的方式,比如设置用户名的页面,切换到下一页,但也可能返回到上一页。

如果想每次进入页面时,一切从新开始,不想记录任何信息,则使用动态方式。比如登录类切换,登录后一切都应该从新开始。


参考:

QML 页面切换方式

QtQuick多页面切换、多页面切换动画、多个qml文件数据交互

QT QML调用新页面和退出新页面回到原来页面

【Qt开发】qml页面的创建、呈现与销毁