QML 语言基础

新建空的 Qt Quick 项目 helloqml，下面更改一下自动生成的 main.qml 文件：

// 下面是导入语句
import QtQuick 2.9
import QtQuick.Window 2.2

/* QML文档可以看做是一个QML对象树,这里创建了Window根对象
和它的子对象Text */
Window {
    visible: true
     640
    height: 480
    title: qsTr("Hello World")

    Text {
        id: text1
        text: qsTr("hello QML!")
    }
}

运行结果如下图所示：


一、import 语句

类似于 C++ 中的 include，在 QML 中使用 import 语句导入模块，模块中包含了各种 QML 类型。QtQuick 模块为创建图形用户界面提供了最基本的类型，比如代码中使用的 Text 类型就包含在 QtQuick 模块中，QML文档中首先要导入该模块。这里我们导入了 QtQuick 2.9。

因为代码中使用了 Window 类型，所以这里还导入了 QtQuick.Window 模块。Window类型可以为 Qt Quick 场景创建一个顶级窗口，所以它一般作为根对象，在其中可以创建其他 QML 对象。


二、QML类型

QML 的类型系统包含了基本类型、 QML 对象类型和 JavaScript 类型，这些类型组成了整个 QML 文档。

  • 基本类型

    在 QML 中将指向简单数据的类型称为基本类型，比如 int 或 string 等。基本类型的概念是相对于 QML 对象类型而言的，QML 对象类型可以包含属性、信号和函数等，但基本类型不能作为对象，比如 int {} 是不允许的。

  • **QML 对象类型 **

    QML 对象类型就是可以实例化 QML 对象的类型。从语法上面来说，QML 对象类型可以通过类型名称{对象特性} 的格式来定义一个对象。例如，代码中 Window 和 Text 都是对象类型。当对象类型被实例化以后，就被叫做该对象类型的对象 ，例如 Text 对象类型在代码中被实例化为了 Text 类型的对象 Text，之所以这两个概念容易被混淆，是因为它们是同名的。只需要记住对象类型后面添加 {} 后就被称为对象 ，大家也可以类比C++中的类与实例化。

  • **JavaScript 类型 **

    QML 支持 JavaScript 对象和数组，可以通过var 类型创建并存储任何标准的 JavaScript 类型。


三、对象

在前面对象类型处已经讲明了什么是对象，这里再重申一下。QML 对象由类型指定，一般与类型同名，名称以大写字母开头，后面跟一对大括号，在括号中包含了对象特性定义，包括 id、属性、信号、信号处理器、方法、附加属性和附加信号处理器等，当然也可以包含子对象。例如，前面代码中 Window 对象中包含了 visible、width、height、title 等属性定义和 Text 子对象。


四、属性

属性是对象的特性之一，可以分配一个静态的值或者绑定一个动态表达式，属性和值由一个冒号隔开，使用 “属性 : 值” 语法进行初始化，比如前面代码中 640 。属性可以分行写，这样结尾可以不用分号，也可以写在一行，中间使用分号隔开，例如： 640; height: 480 。可以在任意对象类型的帮助文档中查看该类型的所有属性。


4.1 属性的类型

可以在 QML 文档中使用的类型大概有三类：

  • 由 QML 语言本身提供的基本类型。
  • 由 QML 模块（比如 Qt Quick）提供的类型。
  • 导出到 QML 环境中的 C++ 类型。

（1）基本类型

QML 支持的基本类型包括 int、real、double、bool、string、color、List、font 等。这些基本类型有些是和 ECMAScript 语言的基本类型对应的，比如 string。

还是之前的示例，修改了一下，通过注释标注了属性类型：

Window {
    visible: true // bool
     640 // int
    height: 480 // int
    title: qsTr("Hello World") // string

    Text {
        id: text1
        text: qsTr("hello QML!")  // string
        z: 1.5 // real
    }
}

可以使用 Qt 帮助的索引模式，以 "qml base types" 为关键字检索，找到 QML Basic Types 页面来查看完整的类型列表和每种类型的详情。

注意，QML 中对象的属性是有类型安全检测的，也就是说，你只能指定与属性类型匹配的值，否则会报错。


（2）id 属性

每一个对象都可以指定一个唯一的 id 值，这样便可以在其他对象中识别并引用该对象。例如，下面的代码中有两个 Text 对象，第一个 Text 对象的 id 值为 "text1"。现在第二个 Text 对象便可以引用 text1.text 来设置自己的 text 属性与第一个 Text 对象的 text 属性具有相同的值：

ROW {
   Text {
       id: text1
       text: "Hello World"
   }
    
    Text { text: text1.text}
}

对于一个 QML 对象而言，id 值是一个特殊的值，不要把它看作一个普通的对象属性。 例如前面代码中Text 对象的 id 为 text1，所以可以在其他对象中通过 text1.text 来获取 Text 对象中的 text 属性的值， 但无法通过text1.id 来获取 id 的值。

注意：id 值必须使用小写字母或者下划线开头，并且不能使用字母、数字和下划线以外的字符，其值在一个组件的作用域中必须是唯一的。


4.2 属性更改通知

当一个属性更改值时，它会发送一个信号来告知这个更改。要获取这个信号，只需要创建一个信号处理器（signal handler），它使用 "on<Property>Changed" 语法来命名。示例程序如下：

Rectangle {
     640; height:480
    onWidthChanged: console.debug("Width has changed to:", width)
    onHeightChanged: console.debug("height has changed to:", width)    
}

Rectangle 元素拥有 width 和 height 属性，且定义了两个信号处理器，无论何时属性被修改了，都会自动调用它们。


4.3 列表属性

列表是包括在方括号内，以逗号分隔的多个元素的集合。示例如下：

Item {
    children: [
        Image {},
        Text {}
    ]
}

如果列表中只有一个元素，那么可以省略掉方括号：

Item {
    children: Text {}
}

其实列表和 ESMAScript 的数组（Array）是类似的，其访问方式也一样：

  • 可以用 [value1, value2, ..., valueN] 这种形式给 list 对象赋值。
  • length 属性提供了列表内元素的个数。
  • 列表内的元素通过数组下标来访。

访问列表的示例程序如下：

Item {
	children:{
		Text {
			text: "textOne"		
		}
		Text {
			text: "textTwo"		
		}	
	}
	
	Component.onCompleted: {
		for (vat i=0; i<children.length; i++)
			console.log("text of label", i, "：", children[i].text)
	}
		
}

4.4 分组属性

在某些情况下使用一个 "." 符号或分组符号将相关的属性形成一个逻辑组。有时我们给分组属性赋值是一个个来的，类似于这样：

Text {
    font.pixelSize: 18
    font.bold: true
}

其实下面这样的写法在形式上更贴合分组的含义：

Text {
    font { pixelSize: 18; bold: true; }
}

其实可以这么理解，font 属性的类型本身是一个对象，这个对象又有 pixelSize、bold、italic、underline 等属性。对于类型为对象的属性值，可以使用 "." 操作符展开对象的每一个成员对其赋值，也可以通过分组符号（一对花括号）把要赋值的成员放在一起给它们赋值。


4.5 附加属性

在 QML 语言的语法中，有一个附加属性的概念，这是附加到一个对象上的额外的属性。

举个例子，下面的 Item 对象使用了附加属性：

import QtQuick 2.2

Item {
     100
    height: 100
    
    focus: true
    keys.enabled: false
}

你看，Item 对象设置 keys.enabled 为false，Keys 就是 Qt Quick 提供的供 Item 处理按键事件的附加属性。与附加属性相似的概念还有附加信号处理器，我们后面再讲。


参考：

《Qt Quick 核心编程》第3章 QML语言基础


【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/linuxAndMcu/p/11729504.html