qml界面架构设计 qml 界面

转载

jowvid 2024-08-02 12:52:39

文章标签 qml界面架构设计前端 javascript html QML 文章分类 架构后端开发

QML 开发客户端应用，避不可免要进行界面切换，例如从登录界面跳转到主界面。

先看下效果：

qml界面架构设计 qml 界面_qml界面架构设计

1、静态

1.1、隐藏法

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

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

1.2、、利用 StackView、SwipeView

2、动态

2.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 // 切换显示登录页面
    }
}

2.2、利用 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()来销毁登录页面以达到关闭的效果，同时节省内存。