QML官方系列教程——First Steps with QML
附网址:http://qt-project.org/doc/qt-5/qmlfirststeps.html
Creating a QML Document —— 创建一个QML文件
一个QML文件定义了对象的层次结构:具有高度可读的,结构化的布局。每个QML文件由两部分组成:一个引入(import)部分,以及一个对象声明(declaration)部分。用户界面中最常用的的类型(types)和功能由引入QtQuick提供。
Importing and Using the QtQuick Module —— 引入和使用QtQuick模块
为了使用Qt Quick组件,一个QML文件需要引入QtQuick。引入语法类似如下:
import QtQuick 2.0
现在Qt Quick提供的类型和功能可以被用在这个QML文件里了~
Defining an Object Hierarchy —— 定义一个对象的层次结构
QML文件中的对象声明定义了对象在视景中的显示样式。Qt Quick提供了用于构建所有用户界面的基本构建块,例如显示图像或者文本、或是处理用户输入的对象等。
一个简单对象声明可以是一个中心带有文本的彩色的矩形框:
Rectangle { width: 200 height: 100 color: "red" Text { anchors.centerIn: parent text: "Hello, World!" }
}
这里定义了一个对象层次:根对象为Rectangle,它拥有一个孩子Text对象。Text对象的父对象被自动设置为这个Rectangle,类似地,Text对象被添加到这个Rectangle对象的子对象属性中。该工作由QML完成。
Putting it All Together —— 放在一起
上面例子中的Rectangle和Text类型都是由引入的QtQuick提供的。将引入语句和对象声明放在一起,我们就得到了一个完整的QML文件:
import QtQuick 2.0Rectangle {width: 200height: 100color: "red"Text {anchors.centerIn: parenttext: "Hello, World!"}
}
如果我们可以保存这个文件为"HelloWorld.qml",然后加载并显示它。
Loading and Displaying the QML Document —— 加载和显示QML文档
为了显示这个QML文档定义的图形界面,可以使用qmlscene工具加载它。qmlscene工具安装在Qt的安装目录中。假设Qt的二进制文件被安装在系统可执行路径,你可以使用以下的命令显示这个QML文档:
qmlscene HelloWorld.qml
你将看到文本"Hello, World"在一个红色矩形的中心。
Handling User Input —— 处理用户输入
一个使用QML定义用户界面的很大优点是,它允许用户界面设计师利用简单的JavaScript表达式来决定应用程序该如何对事件作出响应。在QML中,我们将这些事件作为signals;而这些信号则被signal handlers进行处理。
举例来说,考虑下面这个例子:
import QtQuick 2.0Rectangle {width: 200height: 100color: "red"Text {anchors.centerIn: parenttext: "Hello, World!"}MouseArea {anchors.fill: parentonClicked: parent.color = "blue"}
}
这个例子可以被保存为"ClickableHelloWorld.qml"并在qmlscene中运行。无论用户点击这个窗口的什么地方,这个矩形都将由红色变成蓝色。注意这个MouseArea类型在触摸事件发生时也会发出clicked信号,因此这段代码可以同样工作在移动设备上。
用户的键盘输入也能被类似的处理通过一段简单的表达式:
import QtQuick 2.0Rectangle {width: 200height: 100color: "red"Text {anchors.centerIn: parenttext: "Hello, World!"}focus: trueKeys.onPressed: {if (event.key == Qt.Key_Return) {color = "blue";event.accepted = true;}}
}
通过接受焦点,无论何时返回键按下,矩形框的颜色都将被改变成蓝色。
Property Bindings —— 属性绑定
对象和它们的属性来源于QML文件对图形界面定义的定义。QML语言允许属性通过多种方式互相绑定。从而创造高动态性的用户界面。
在下面的例子中,每个子Rectangle的几何属性都被绑定到父Rectangle上。如果父Rectangle的几何形状改变,由于属性绑定,每个孩子的几何形状也都会自动更新。
Animations —— 动画
属性也可以通过动画动态更新。QtQuick提供了多种动画类型,可以用来动态地改变一个属性的值。在下面的例子中,我们设置了一个动态的属性,并且在Text区域中进行显示
import QtQuick 2.0Rectangle {color: "lightgray"width: 200height: 200property int animatedValue: 0SequentialAnimation on animatedValue {loops: Animation.InfinitePropertyAnimation { to: 150; duration: 1000 }PropertyAnimation { to: 0; duration: 1000 }}Text {anchors.centerIn: parenttext: animatedValue}
}
所显示的值将在0到150之间周期地变化。
Defining Custom QML Types for Re-use —— 定义可复用的自定义QML类型
在QML中最重要的概念之一就是类型的复用。一个应用程序可能含有多个相同的可视类型(例如,多个按钮),同时QML允许这类事物被定义为可复用的、定制的类型,以减小代码重复性并提高可读性。
例如,想象下开发者在Button.qml文件中定义了一个新的按钮类型:
// Button.qml
import QtQuick 2.0Rectangle {width: 100; height: 100color: "red"MouseArea {anchors.fill: parentonClicked: console.log("Button clicked!")}
}
这个类型可能在应用程序中被复用多次,像下面这样:
// application.qml
import QtQuick 2.0Column {Button { width: 50; height: 50 }Button { x: 50; width: 100; height: 50; color: "blue" }Button { width: 50; height: 50; radius: 8 }
}
在这种方式下,模块化的用户界面类型就可以在应用程序中被组装和复用了。
参考QML Object Attributes来获取关于如何开发你自己的可复用组件的更多信息。
Where to Go from Here —— 接下来的旅程
现在你已经看到了QML的响应机制,是时候开始你的下一步了。以下页面将在你与QML的旅程中引导下你。
QML Applications
QML官方系列教程——First Steps with QML相关推荐
- QML官方系列教程——QML Applications
附网址:http://qt-project.org/doc/qt-5/qmlapplications.html 假设你对Qt的官方demo感兴趣,能够參考本博客的另一个系列Qt5官方demo解析集 每 ...
- QML官方系列教程——QML Coding Conventions
附网址:http://qt-project.org/doc/qt-5/qml-codingconventions.html QML Coding Conventions -- QML编码规范 这个文档 ...
- QML官方系列教程——Use Case - Animations In QML
附网址:http://qt-project.org/doc/qt-5/qtquick-usecase-animations.html Use Case - Animations In QML -- 用 ...
- QML官方系列教程——Use Case - Visual Elements In QML
附网址:http://qt-project.org/doc/qt-5/qtquick-usecase-visual.html Use Case - Visual Elements In QML -- ...
- QML官方系列教程——Using Qt Quick Designer
附网址:http://qt-project.org/doc/qtcreator-3.1/creator-using-qt-quick-designer.html Using Qt Quick Desi ...
- qml自定义switch_QML官方系列教程——Qt Quick Controls Styles
附网址:http://qt-project.org/doc/qt-5/qtquickcontrolsstyles-index.html Qt Quick Controls Styles -- Qt Q ...
- struts2官方 中文教程 系列六:表单验证
先贴个本帖的地址,以免被爬:struts2教程 官方系列六:表单验证 即 http://www.cnblogs.com/linghaoxinpian/p/6906720.html 下载本章节代码 介 ...
- Unity5.3官方VR教程重磅登场-系列7 优化VR体验
本文转自:知乎专栏-笨猫快乐学编程,作者:王寒 简介 对于VR应用来说,如果想要让用户获得好的用户体验,特别是免除恶心眩晕的困扰,在VR开发中进行优化是必不可少的,惟其如此才能达到我们期望的游戏运行帧 ...
- 玩转 IDEA 系列教程——强烈推荐官方中文(汉化)插件!
玩转 IDEA 系列教程 每天进步一点,不做curd工程师与Api调用工程师 欢迎访问个人博客网站:https://www.coder-programming.cn/ IDEA2020.1版本的到来, ...
最新文章
- 打印JavaScript对象的内容? [重复]
- 网站输入正确账号密码页面刷新一下_Folx的密码管理保存网站登陆信息
- 《构建之法》阅读笔记2
- 转载:CRONTAB格式,命令
- vb.net2.0 Hmac-md5加密算法
- 今天,终于又有时间更新飞鸽传书了。
- Windows Server 2008 配置使用动态IP和备用地址
- 鸿蒙轻内核定时器Swtmr:不受硬件和数量限制,满足用户需求
- DXF文件中将多段线凸度转换成圆弧
- 数据库报错“system01.dbf需要更多的恢复来保持一致性,数据库无法打开”
- 【心电信号】基于matlab瞬时抑制心电信号IIR滤波【含Matlab源码 1533期】
- 安卓手机如何复制粘贴不重叠_复制的文字粘贴时怎么重叠了 - 卡饭网
- 什么时候做都不晚——十大大器晚成的人物
- 自动化构建java应用实战
- Excel表格中如何快速插入多个空白行
- mysql spring lobhandler_Spring 让 LOB 数据操作变得简单易行()
- 高并发累加器 Striped64
- BZOJ3713: [PA2014]Iloczyn
- 图解 生成对抗网络GAN 原理 超详解
- 工程测量实训心得体会