在这篇文章中。我们将介绍怎样使用Loader来载入不同的QML文件来实现动态的UI。在之前的文章“怎样使用Loader来动态载入一个基于item的Component”中,我们已经介绍了一些关于它的使用方法。
Loader的优点是仅仅有在我们须要的时候才装载我们所须要的QML文件,这样能够节省应用所须要的内存,也同一时候能够提高应用的启动时间(假设利用好的话)。以下我们以一个简单的样例来做一个介绍。很多其它关于动态生产QML UI的样例,请參阅“怎样使用QML动态产生Component来完毕我们的气球游戏(2)”。
MainScreen.qml
import QtQuick 2.0
Rectangle {
id: root
width: 600
height: 400
property int speed: 0
SequentialAnimation {
running: true
loops: Animation.Infinite
NumberAnimation { target: root; property: "speed"; to: 145; easing.type: Easing.InOutQuad; duration: 4000; }
NumberAnimation { target: root; property: "speed"; to: 10; easing.type: Easing.InOutQuad; duration: 2000; }
}
// M1>>
Loader {
id: dialLoader
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: analogButton.top
onLoaded: {
binder.target = dialLoader.item;
}
}
Binding {
id: binder
property: "speed"
value: speed
}
// <<M1
Rectangle {
id: analogButton
anchors.left: parent.left
anchors.bottom: parent.bottom
color: "gray"
width: parent.width/2
height: 100
Text {
anchors.centerIn: parent
text: "Analog"
}
MouseArea {
anchors.fill: parent
onClicked: root.state = "analog";
}
}
Rectangle {
id: digitalButton
anchors.right: parent.right
anchors.bottom: parent.bottom
color: "gray"
width: parent.width/2
height: 100
Text {
anchors.centerIn: parent
text: "Digital"
}
MouseArea {
anchors.fill: parent
onClicked: root.state = "digital";
}
}
state: "analog"
// M3>>
states: [
State {
name: "analog"
PropertyChanges { target: analogButton; color: "green"; }
PropertyChanges { target: dialLoader; source: "Analog.qml"; }
},
State {
name: "digital"
PropertyChanges { target: digitalButton; color: "green"; }
PropertyChanges { target: dialLoader; source: "Digital.qml"; }
}
]
// <<M3
}
Loader {
id: dialLoader
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: analogButton.top
onLoaded: {
binder.target = dialLoader.item;
}
}
它的source没有被指定。
在程序中。它是能够被动态设置的。从而达到改变UI的目的。另外我们要注意到“dialLoader.item”,它实际上是在QML被装载完后最顶层的那个Item。对我们来说。当Analog.qml被装载后,这个Item就是Ananlog.qml所代表的Item。
每当Loader的source发生改变时,它先前创建的Item将会被自己主动地销毁。
在程序中,也设置了两个Rectangle,被用作button的用途。点击它时,能够改变当前Component的state,从而装载不同的qml,以达到改变UI的目的。
在应用中。默认的状态是“analog”。而不是我们通常的“”状态。
在我们的手机上执行: