QML 基本语法1

Posted 2021-03-25 linuxandmcu

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

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

/* QML文档可以看做是一个QML对象树,这里创建了Window根对象
和它的子对象Text */
Window {
    visible: true
    width: 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 类型。下面是一个例子：

  import QtQuick 2.0
  
  Item {
      property var theArray: []
      property var theDate: new Date()
  
      Component.onCompleted: {
          for (var i = 0; i < 10; i++)
              theArray.push("Item " + i)
          console.log("There are", theArray.length, "items in the array")
          console.log("The time is", theDate.toUTCString())
      }
  }

三、对象

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

四、属性

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

五、对象标识符

每一个对象都可以指定一个唯一的 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 值必须使用小写字母或者下划线开头，并且不能使用字母、数字和下划线以外的字符，其值在一个组件的作用域中必须是唯一的。

六、注释

QML 中的注释与 C++ 相似，单行注释使用 “ // ” 开始，直到行末结束；多行注释使用 “ / ” 开始，以 “ / ” 结尾。

七、表达式

JavaScript 表达式可以用于分配属性的值，例如：

Item {
    width: 320 * 2
    height: 400 + 80
}

在表达式中也可以包含其他对象或属性的引用 ， 例如，height: width ，这也被称作属性绑定，当 width 的值改变时，height 属性的值会跟随变化。

八、调试输出

在 QML 中一般使用 console 将需要的信息输出到控制台，可用的有 console.log，console.debug， console.info，console.warn 和 console.error，比如这里使用了console.debug("colorRect: ", parent.color) ，可以顺序输出参数中的内容，可以是字符串，也可以是对象属性引用。

参考：

第3篇 Qt Quick入门教程之基础（三）QML语法1