QML了解

QT Quick是QT提供的一种高级用户界面工具包，包含对QML完美支持，QTQuick设计器，QML与C++混合编程技术。Qt Quick 就是使用 QML 构建的一套类库。

Qml模块本身并没有涉及图形显示，所有的图形处理都由Qt Quick模块完成。
QMl是一种高效的开发UI 的语言。QML（Qt Meta-Object Language，Qt元对象语言）是一种声明式编程语言，并且它是Qt框架的一个组成部分。QML的主要功能是让开发人员快速、便捷地开发出用户界面，这些界面包括了桌面应用、移动设备和嵌入式就用的界面。并且，QML还能够与JavaScript无缝整合一起开发使用，即在QML代码中可以直接使用JavaScript文件。

# view.qml
import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color: "green"

    Text {
        text: "Hello World"
        anchors.centerIn: parent
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13

创建QML项目

只想测试QML相关内容，希望可以快速显示界面效果，这时可以创建 Qt Quick Ul项目。Qt QuickUl项目中只包含QML和JavaScript代码，没有添加任何C++代码。

创建Qt Quick项目

// main.qml
import QtQuick 2.12
import QtQuick.Window 2.12
 
Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
}
1
2
3
4
5
6
7
8
9
10

每一个 QML 有且只有一个根元素，类似于 XML 文档。这个根元素就是这个 QML 文档中定义的 QML 元素，在这个例子中就是一个 Window 对象。

#include <QtQml>
1

import QtQml 2.14
1

qmake .pro文件：

QT += qml
1

QML Basic Types

QML对象类型是指具有properties, signals, methods等的对象。

• bool：true/false

Item {
      focus: true
      clip: false
  }
1
2
3
4

• double

Item {
      property double number: 32155.2355
  }
1
2
3

• enumeration：<Type>.<value>

Text { horizontalAlignment: Text.AlignRight }
1

• int：e.g. 0, 10, or -20。

Item { width: 100; height: 200 }
1

• list

import QtQuick 2.0

  Item {
      width: 100; height: 100

      states: [
          State { name: "activated" },
          State { name: "deactivated" }
      ]

      Component.onCompleted: {
          console.log("Name of first state:", states[0].name)
          for (var i = 0; i < states.length; i++)
              console.log("state", i, states[i].name)
      }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

如果列表仅包含一个对象，则可以省略方括号：

import QtQuick 2.0

  Item {
      width: 100; height: 100
      states: State { name: "activated" }
  }
1
2
3
4
5
6

• real：带小数点的数字

Item { width: 100.45; height: 150.82 }
1

• string

Text { text: "Hello world!" }
1

• url

Image { source: "pics/logo.png" }
1

Image {
      source: "pics/logo.png"

      Component.onCompleted: {
          // This prints 'false'. Although "pics/logo.png" was the input string,
          // it's been converted from a string to a URL, so these two are not the same.
          console.log(source == "pics/logo.png")

          // This prints 'true' as Qt.resovledUrl() converts the string into a
          // URL with the correctly resolved path
          console.log(source == Qt.resolvedUrl("pics/logo.png"))

          // This prints the absolute path, e.g. "file:///path/to/pics/logo.png"
          console.log(source.toString())
      }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• var：可以引用任何数据类型的通用属性类型。

Item {
      property var aNumber: 100
      property var aBool: false
      property var aString: "Hello world!"
      property var anotherString: String("#FF008800")
      property var aColor: Qt.rgba(0.2, 0.3, 0.4, 0.5)
      property var aRect: Qt.rect(10, 10, 10, 10)
      property var aPoint: Qt.point(10, 10)
      property var aSize: Qt.size(10, 10)
      property var aVector3d: Qt.vector3d(100, 100, 100)
      property var anArray: [1, 2, 3, "four", "five", (function() { return "six"; })]
      property var anObject: { "foo": 10, "bar": 20 }
      property var aFunction: (function() { return "one"; })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• date：“YYYY-MM-DDThh:mm:ss.zzzZ”

MyDatePicker { minDate: "2000-01-01 0:0"; maxDate: "2020-12-31 23:59" }
1

• point：描述x和y属性，“x,y”

CustomObject { myPointProperty: "0,20" }
1

CustomObject { myPointProperty: Qt.point(0, 20) }
1

• rect：x, y, width and height。“x, y, width x height”

CustomObject { myRectProperty: "50,50,100x100" }
1

CustomObject { myRectProperty: Qt.rect(50, 50, 100, 100) }
1

Rectangle {
      width: childrenRect.width
      height: childrenRect.height

      Rectangle { width: 100; height: 100 }
  }

1
2
3
4
5
6
7

• size：width和height。“width x height”

Image { sourceSize: "150x50" }
1

Image { sourceSize: Qt.size(150, 50) }
1

Column {
      Image { id: image; source: "logo.png" }
      Text { text: image.sourceSize.width + "," + image.sourceSize.height }
  }
1
2
3
4

QML object types

• Component：（组件）组件是可重用、封装的 QML 类型，具有明确定义的接口。
• QtObject
• Binding
• Connections
• Timer

quick组件

如表是Qt Quick Controls 1.1 提供的组件