简介
QML(Qt Markup Language:Qt 标记语言)是一种描述用户界面的声明式语言。它将用户界面分解成一些更小的元素,这些元素能够结合成一个组件(Component)。QML语言描述了用户界面元素的形状和行为。用户界面能够使用JavaScript来提供修饰,或者增加更加复杂的逻辑。从这个角度来看它遵循HTML-JavaScript模式,但QML是被设计用来描述用户界面的,而不是文本文档。
从QML元素的层次结构来理解是最简单的学习方式。子元素从父元素上继承了坐标系统,它的x,y坐标总是相对于它的父元素坐标系统。
实例代码
下面是一个简单的qml文件:
import QtQuick 2.0
//根元素是 Rectangle
Rectangle {
//命名这个元素为:root
id: root;
//属性:<属性名>:<属性值>
width: view.width; height: view.height;
color: "#d8d8d8";
//声明一个内嵌的元素(root的子元素)
Image {
id : view
source: 'image/view.jpg'
}
//另一个内嵌的元素
Text {
//未命名的元素
//参照parent
x: parent.width/2-width; y: 25;
horizontalAlignment: Text.AlignHCenter;
text: '风景图';
color: "#fff";
font.pixelSize: 35;
}
}
解读代码
*import声明导入了一个指定的模块版本。一般来说会导入QtQuick2.0 来作为初始元素的引用。*使用//可以单行注释,使用/**/可以多行注释,就像C/C++和JavaScript一样。
*每一个QML文件都需要一个根元素,就像HTML一样。
*一个元素使用它的类型声明。然后使用{}进行包含。
*元素拥有属性,他们按照name:value的格式来赋值。
*任何在qml文档中的元素都可以使用它们的id进行访问(id是一个任意地标识符)。
*元素可以嵌套,这意味着一个父元素可以拥有多个子元素。子元素可以通过访问parent关键字来访问它们的父元素。
好的编程习惯
在编写qml文件时,会经常使用id或者关键字parent来访问你的父对象。有一个比较好的方法是命名你的根元素对象id为root(id:root),这样就不用去思考你的qml文件中的根元素应该用什么方式命名了。
提示:我们可以通过Qt Creator编写建立工程来编写和运行编写好的qml文件,也可以在终端运行命令来执行qml文件,比如:
$ $QTDIR/bin/qmlscene rectangle.qml
将
$QTDIR 替换为你自己Qt的安装路径。qmlscene会执行Qt Quick运行环境初始化,并且解释这个qml文件。
Windows环境下,运行$QTDIR/bin/qmlscene rectangle.qml 和 $QTDIR/bin/qmlscene.exe rectangle.qml效果是一样的。