利用Loader来动态载入不同的QML文件来改变UI

在这篇文章中。我们将介绍怎样使用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
}

从上面的代码中能够看出来。在程序中。我们使用了一个dialLoader：

   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”。而不是我们通常的“”状态。

在我们的手机上执行：

   

全部项目的源代码在： https://github.com/liu-xiao-guo/loaderclock.git