在这篇文章中。我们将介绍怎样使用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”。而不是我们通常的“”状态。


在我们的手机上执行:

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="200" height="300" alt="">   






利用Loader来动态载入不同的QML文件来改变UI的更多相关文章

  1. c#上利用NPlot实现动态曲线图需要的dll文件

    这儿暂时只提供我之间根据网上的方法编译出来的dll文件,大家如果需要直接在vs项目上导入就行了,然后在工具箱里就会自动添加一项,大家添加上去就知道了. 下载地址:http://pan.baidu.co ...

  2. Android动态载入Dex机制解析

    1.什么是类载入器? 类载入器(class loader)是 Java™中的一个非常重要的概念.类载入器负责载入 Java 类的字节代码到 Java 虚拟机中. Java 虚拟机使用 Java 类的方 ...

  3. 插件化开发—动态载入技术载入已安装和未安装的apk

    首先引入一个概念,动态载入技术是什么?为什么要引入动态载入?它有什么优点呢?首先要明确这几个问题.我们先从 应用程序入手,大家都知道在Android App中.一个应用程序dex文件的方法数最大不能超 ...

  4. Android动态载入JAR包的实现方法

    有时候我们须要使用动态更新技术,简单来说就是:当我们把开发jar包发送给用户后.假设后期升级了部分代码.这时让用户的jar包自己主动更新,而不是用户主动手动地去更新的技术就是动态更新.这个须要使用的技 ...

  5. Android 使用动态载入框架DL进行插件化开发

    如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456    (来自时之沙的csdn博客) 概述: 随着应用的不断迭代.应用的体积不断增大,项目越来越臃肿,冗余添 ...

  6. Extjs学习----------动态载入js文件(减轻浏览器的压力)

    动态载入js文件能够减轻浏览器的压力,本例使用了Ext.window.Window组件,该组件的学习地址:http://blog.csdn.net/z1137730824/article/detail ...

  7. Android学习小Demo(19)利用Loader来实时接收短信

    之前写过一篇文章<Android学习小Demo(13)Android中关于ContentObserver的使用>,在里面利用ContentOberver去监測短信URI内容的变化.我们先来 ...

  8. 利用PHP的debug_backtrace函数,实现PHP文件权限管理、动态加载

    简述 可能大家都知道,php中有一个函数叫debug_backtrace,它可以回溯跟踪函数的调用信息,可以说是一个调试利器. 好,来复习一下 01 one(); 02 03 function one ...

  9. (转)利用PHP的debug_backtrace函数,实现PHP文件权限管理、动态加载 【反射】

    原文地址:http://www.cnblogs.com/melonblog/archive/2013/05/09/3062303.html 原文作者:豆浆油条 - melon 本文示例代码测试环境是W ...

随机推荐

  1. selenium.common.exceptions.WebDriverException: Message: u'unknown error: cannot get automation extension\nfrom unknown error: page could not be found: chrome-extension://aapnijgdinlhnhlmodcfapnahmbfeb

    Python2.7 selenium3.4.1在使用chrome driver时报错:selenium.common.exceptions.WebDriverException: Message: u ...

  2. LeetCode(107) Binary Tree Level Order Traversal II

    题目 Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from l ...

  3. PAT Basic 1051

    1051 复数乘法 复数可以写成 (A+Bi) 的常规形式,其中 A 是实部,B 是虚部,i 是虚数单位,满足 i​2​​=−1:也可以写成极坐标下的指数形式 (R×e​(Pi)​​),其中 R 是复 ...

  4. 00049_super关键字

    1.子父类中构造方法的调用 (1)在创建子类对象时,父类的构造方法会先执行,因为子类中所有构造方法的第一行有默认的隐式super();语句: (2)格式 调用本类中的构造方法 this(实参列表); ...

  5. hdu2255 奔小康赚大钱 KM 算法

    参见这里 #include <iostream> #include <cstring> #include <cstdio> using namespace std; ...

  6. 利用Node.js调用Elasticsearch

    1. 下载elasticsearch库 npm install elasticsearch --save 2.在脚本里导入模块,如下所示 const elasticsearch = require(' ...

  7. kali-xfce的简单配置

    1.更新 设置kali的更新源 在终端中打开sources.list root@kali:~# vim /etc/apt/sources.list 删除里面的注释,清空. 然后输入下面的更新源地址: ...

  8. SQL server游标基本结构

    简单游标遍历数据: BEGIN DECLARE QZ_cursor CURSOR SCROLL FOR /*创建游标*/ SELECT NAME FROM USERINFO/*要遍历的数据*/ OPE ...

  9. Caffe 不同版本之间layer移植方法

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/52185521 (前两天这篇博客不小心被 ...

  10. Codeforces #765D

    我在这道题上花了2个小时,仍没解出.理一下当时的思路,看看症结到底在哪里. 题意 用 $[n]$ 表示集合 $\{1,2,3,\dots, n\}$ . 3个函数 $f \colon [n] \to ...