Qt5与QML（一）

最新推荐文章于 2024-05-14 20:04:23 发布

liuyun2113

最新推荐文章于 2024-05-14 20:04:23 发布

阅读量4.1k

点赞数

分类专栏： QML 文章标签： qt5 QML ui 应用程序界面

QML 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

QML 语法

QML是一门用来描述你的应用程序UI的描述性语言，他将UI分解为一个个很小的“元素”，然后利用这些元素拼接成一个的组件。QML描述这些UI元素的形状与行为，这些UI描述经过JavaScript的充实，不仅简单方便，而且可以实现非常复杂的逻辑。从一定的角度上来看，QML类似与HTML-JavaScript的形式，但他是用来设计UI界面的，而不是一个简单的文本文档。

在QML中最简单的关系就是他的层次结构，子元素位于父元素之上，并继承他的坐标系。也就是说，子元素的坐标中x、y是相对于父元素而言的。

我们从这个简单的QML文件中来了解一下QML的语法规则。

// rectangle.qml
import QtQuick 2.0
// The root element is the Rectangle
Rectangle {
	// name this element root
	id: root
	// properties: <name>: <value>
	width: 120; height: 240
	// color property
	color: "#D8D8D8"
	// Declare a nested element (child of root)
	</span>Image {
		id: rocket
		// reference the parent<span style="white-space:pre">	</span>
		x: (parent.width - width)/2; y: 40
		source: ’assets/rocket.png’
	}
	// Another child of root
	Text {
		// un-named element
		// reference element by id
		y: rocket.y + rocket.height + 20
		// reference root element
		width: root.width
		horizontalAlignment: Text.AlignHCenter
		text: ’Rocket’
	}
}

import关键字声明一个有具体版本信息的模块，一般情况下，你只需要声明成QtQuick2.0即可
注释信息可以采用//或者/**/这中类似于C++和JavaScript的形式
每一个QML文件必须要有一个ROOT节点，类似与HTML一样
所有的元素都要用{}来包围
每一个元素都可以有自己的属性，比如name:value
QML中的任何元素都可以使用他们的ID来访问
元素可以嵌套，意味着一个父元素可以有一些子元素，在子元素中可以使用parent这个关键字来访问父元素的内容

属性

元素是被他们的元素名称以及一些属性或者是自定义的属性来描述的，一个属性是一个简单的键值关系，比如width : 100, text : 'Greetings' , color : '#FF0000'。一个属性具备可以设置初始值。

Text {
	// (1) identifier
	id: thisLabel
	// (2) set x- and y-position
	x: 24; y: 16
	// (3) bind height to 2 * width
	height: 2 * width
	// (4) custom property
	property int times: 24
	// (5) property alias
	property alias anotherTimes: thisLabel.times
	// (6) set text appended by value
	text: "Greetings " + times
	// (7) font is a grouped property
	font.family: "Ubuntu"
	font.pixelSize: 24
	// (8) KeyNavigation is an attached property
	KeyNavigation.tab: otherLabel
	// (9) signal handler for property changes
	onHeightChanged: console.log(’height:’, height)
	// focus is neeed to receive key events
	focus: true
	// change color based on focus value
	color: focus?"red":"black"
}

整理下这个属性的特点

id是一个非常特殊的属性，他可以使一个元素从一个QML文件被外部的元素所引用，这个ID不是一个字符串，而是在QML语法中的一个特殊的标识符。ID必须要被设置为一个不重复的值，而且他的值不能够被修改。
一个属性都可以根据他的类型而被设置一个值，如果一个属性没有被赋值，那么也会被初始化一个值，具体类型的初始值需要根据去查阅相关的文档。
一个属性是可以依赖于另外一个属性，这种形式叫做Binding，一个被绑定的元素数据被修改，另外一个也会被修改。上面例子中的height会随着width的变化乘以2增长。
自定义属性的格式是（property <type> <name> : <value> ）。如果没有给初始值，系统会默认给一个初始值。
另外一个重要的描述属性的方式就是alias关键字，他的格式是（property alias <name> : <reference> ）。alias关键字允许转发一个在本作用域之外的对象的属性，甚至就是对象本身。alias不需要声明类型，以为他本身就已经存在了对象的类型。
text属性依赖于int类型的times属性，这个int类型会自动的转换为string类型，因此text的文本内容可以根据times进行更新。
还有一些属性是一个组，比如字体属性，font { family: "Ubuntu"; pixelSize: 24}.
一些属性附加到元素本体，这对于应用程序来说也只会出现一次，他是一个全局的属性。访问格式为<Element>.<property> : <value>
你可以给每一个属性都定义一个回调函数，这个函数会在属性的值发生改变时调用，比如说，你的height属性发生了改变，那么你可以通过回调函数将这个变化写到系统日志内。