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
    }
}

创建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")
}

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

#include <QtQml>

import QtQml 2.14

qmake .pro文件：

QT += qml

QML Basic Types

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

• bool：true/false

Item {
      focus: true
      clip: false
  }

• double

Item {
      property double number: 32155.2355
  }

• enumeration：<Type>.<value>

Text { horizontalAlignment: Text.AlignRight }

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

Item { width: 100; height: 200 }

• 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)
      }
  }

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

import QtQuick 2.0

  Item {
      width: 100; height: 100
      states: State { name: "activated" }
  }

• real：带小数点的数字

Item { width: 100.45; height: 150.82 }

• string

Text { text: "Hello world!" }

• url

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

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())
      }
  }

• 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"; })
  }

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

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

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

CustomObject { myPointProperty: "0,20" }

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

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

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

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

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

      Rectangle { width: 100; height: 100 }
  }

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

Image { sourceSize: "150x50" }

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

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

QML object types

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

quick组件

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

ApplicationWindow	对应QMainWindow，提供顶层应用程序窗口
MenuBar	对应QMenuBar，提供窗口顶部横向的菜单栏
StatusBar	对应QStatusBar，提供状态栏
ToolBar	对应QToolBar，提供工具栏，可以添加ToolButton和其它组件
Action	对应QAction，提供能够绑定到导航和视图的抽象的用户界面动作
ScrollView	对应QScrollView，提供滚动视图
SplitView	对应QSplitter，提供可拖动的分割视图布局
StackView	对应QStackedWidget，提供基于栈的层叠布局
TabView	对应QTabWidget，提供带有标签的基于栈的层叠布局
TableView	对应QTableWidget，提供带有滚动条、样式和表头的表格
Button	对应QPushButton，提供按钮组件
CheckBox	对应QCheckBox，提供复选框
ComboBox	对应QComboBox，提供下拉框
TabView	对应QTabWidget，提供带有标签的基于栈的层叠布局
GroupBox	对应QGroupBox，提供带有标题、边框的容器
Label	对应QLabel，提供标签组件
ProgressBar	对应QProgressBar，提供进度条组件
RadioButton	对应QRadioButton，提供单选按钮
Slider	对应QSlider，提供滑动组件
SpinBox	对应QSpinBox，提供微调组件
Switch	提供类似单选按钮的开关组件
TextArea	对应QTextEdit，提供能够显示多行文本的富文本编辑框
TextField	对应QTextLine，提供显示单行文本的纯文本编辑框
ToolButton	对应QToolButton，提供在工具栏上显示的工具按钮