QML-Loader

1、定义

可以把Loader当做一个占位符，即占有屏幕的某一个空间，当加载了组件之后，这个空间就能显示相应的图形了。所以可以给Loader设置anchor布局

2、加载组件

source:加载QML文档

sourceComponent:加载Component组件

注意：同一时刻只能加载一个对象，加载了新的对象之后，上次对象将被销毁；source为空或者sourceCompnent为undefined时【这也是销毁的办法】，会销毁当前加载的对象

3、手册

注意：item指向的是加载的组件的顶层Item

 

4、使用Loader动态切换界面

①、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

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

 

③、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.visible = false

            // 在主窗口上显示登录页面
            var compLogin = Qt.createComponent("LoginPage.qml")
            .createObject(mainWin, {x:100, y:100, width:500, height:350});
        }
    }
}

 

  

 也可以设置两个state分别对应两个qml，不同点击切换不等state

 代码参考：https://www.cnblogs.com/linuxAndMcu/p/13566502.html

 

5、获取Loader的qml对象

var obj = loader.item;

 

PS：

1、注意Loader加载qml的时候，是以当前路径去查找qml的，如：在A.qml中定义Loader去加载当前文件夹B下的B.qml，需要写成：source:"./B/B.qml"，或者qrc形式