QML的Loader元素经常备用来动态加载QML组件。可以使用source属性或者sourceComponent属性加载。这个元素最有用的地方是它能在qml组件需要的时候再创建,即延迟创建QML的时间。
一. 使用source组件加载qml
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
property bool isFirst : false;
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Loader {
id: pageLoader
}
MouseArea {
anchors.fill: parent
onClicked: changePage();
}
function changePage() {
if(isFirst) {
pageLoader.source = "Page1.qml" // 通过source 加载qml 界面
} else {
pageLoader.source = "Page2.qml"
}
isFirst = !isFirst;
}
}
page1.qml
import QtQuick 2.12
Rectangle {
width: 100
height: 62
Text {
anchors.centerIn: parent
text: "Page1 Test"
}
}
page2.qml
import QtQuick 2.12
Rectangle {
width: 100
height: 62
Text {
anchors.centerIn: parent
text: "Page2 Test"
}
}
二。使用sourceComponent 默认加载组件
main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
Window {
property bool isFirst : false;
visible: true
width: 640
height: 480
title: qsTr("Hello World")
Loader {
id: pageLoader
sourceComponent: rect
}
MouseArea {
anchors.fill: parent
onClicked: changePage();
}
function changePage() {
if(isFirst) {
pageLoader.source = "Page1.qml"
} else {
pageLoader.source = "Page2.qml"
}
isFirst = !isFirst;
}
Component {
id: rect
Rectangle {
width: 200
height: 50
color: "red"
Text {
text: "Default Page"
anchors.fill: parent
}
}
}
}
绿色字体的为新增的代码: 实现界面起来就加载 rect 默认页