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

在这篇文章中，我们将介绍如何使用Loader来加载不同的QML文件来实现动态的UI。在之前的文章“如何使用Loader来动态载入一个基于item的Component”中，我们已经介绍了一些关于它的用法。Loader的好处是只有在我们需要的时候才装载我们所需要的QML文件，这样可以节省应用所需要的内存，也同时可以提高应用的启动时间。下面我们以一个简单的例子来做一个介绍。

 

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，被用作按钮的用途。点击它时，可以改变当前Component的state，从而装载不同的qml，以达到改变UI的目的。在应用中，默认的状态是“analog”，而不是我们通常的“”状态。

 

在我们的手机上运行：