在这篇文章中。我们将介绍怎样使用Loader来载入不同的QML文件来实现动态的UI。在之前的文章“怎样使用Loader来动态载入一个基于item的Component”中,我们已经介绍了一些关于它的使用方法。
Loader的优点是仅仅有在我们须要的时候才装载我们所须要的QML文件,这样能够节省应用所须要的内存,也同一时候能够提高应用的启动时间(假设利用好的话)。以下我们以一个简单的样例来做一个介绍。很多其它关于动态生产QML UI的样例,请參阅“怎样使用QML动态产生Component来完毕我们的气球游戏(2)”。
MainScreen.qml
import QtQuick 2.0 Rectangle { id: root 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" 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" 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”。而不是我们通常的“”状态。
在我们的手机上执行: