【引用】QML语言介绍

QML是一种声明式语言，设计用来描述程序中的用户接口：就是看起来像什么，它的行为是什么。在QML中，一个用户接口被定义为对象的属性树。

这种对不管有没有编程经验的人都适合，javascript是QML中的脚本语言，所以你必须学一点关于它的知识。在你深入QML之前，学习一点html和css的基础是很有用的，但不是必须的。

QML语法基础：

qml看起来是像这样的：

import QtQuick 1.0

 Rectangle {

     width: 200

     height: 200

     color: "blue"

     Image {

         source: "pics/logo.png"

         anchors.centerIn: parent

     }

 }

对象都用他们的类型定义，用一对大括号包住。对象类型以大写开始，在上面的例子中，有两个对象，Rectangle和Image，在这两个括号里面，我们能定义object的信息，例如他们的属性。

属性以property:value的形式定义。在上面的例子中，我们能看到Image拥有一个叫source的属性，它被赋值为"pics/logo.png".这个属性和它的值被：分开。

属性值可以每行定义一个

Rectangle {

     width: 100

     height: 100

 }

或者定义在同一行

Rectangle { width: 100; height: 100 }

当多个property/value属性定义在同一行，他们必须用;分开

import语句导入qt模块，它包含了所有标准的QML元素。如果不导入，则Rectangle和Image元素不可达。

表达式

为了将值赋值给property,你可以使用javascript是写表达式

 Rotation {

     angle: 360 * 3

 }

这些表达式包括了另外一些对象的引用，不管哪个绑定被创建：当表达式的值改变，属性和表达式自动的更新为那个值。

 Item {

     Text {

         id: text1

         text: "Hello World"

     }

     Text {

         id: text2

         text: text1.text

     }

 }

在上面的例子中，text2对象将会和text1显示同一个文本，如果text1改变，text2将会自动的改变为同一个值。注意引用另外一些对象，我们将使用id值。

QML注释：

QML的注释和javascript相似

1.单行注释以//开始

2.多行注释以/*开始，以*/结束

注释被解释引擎所忽略，它对解释代码很有用处。注释在追踪问题的时候注释代码也很有用处：

Text {

     text: "Hello world!"

     //opacity: 0.5

 }

在上面的例子中，这个文本对象在注释掉opacity:0.5之后，将会是正常不透明的。

属性

属性命名：属性都是以小写字母开始。

属性类型

QML支持许多属性类型，基本的类型包括int,real,bool,string,color和lists.

 Item {

     x: 10.5             // a 'real' property

     ...

     state: "details"    // a 'string' property

     focus: true         // a 'bool' property

 }

QML属性都是类型安全的，赋予的值必须符合属性类型，例如：item中的x属性是real,如果你赋予一个string类型将会报错。

 Item {

     x: "hello"  // illegal!

 }

id属性

任何一个对象都会用id来独立标识。在同一个QML文件里没有任何两个对象拥有同一个id标识。另外的对象和脚本可以使用id来访问该对象。下面第一个Rectangle拥有一个id "myRect",第二个定义自己的宽度使用myRect.width，这意味这两个Rectangle拥有同一个宽度值。

Item {

     Rectangle {

         id: myRect

         width: 100

         height: 100

     }

     Rectangle {

         width: myRect.width

         height: 200

     }

 }

id必须以小写字母或者下划线开始，不能是其他字符，字母。

list属性：

 Item {

     children: [

         Image {},

         Text {}

     ]

 }

这个list以中括号括起来，以逗号将元素分开。假如list中只有一个元素，可以省略这个方括号。

 Image {

     children: Rectangle {}

 }

默认属性

任何对象类型都可以定义它的list和对象属性来代替默认的属性，如果一个属性以默认的属性来声明，属性标签将会被忽略。

例如：

 State {

     changes: [

         PropertyChanges {},

         PropertyChanges {}

     ]

 }

能够简化为：

State {

     PropertyChanges {}

     PropertyChanges {}

 }

因为changes是state的默认属性

组属性：

从一个逻辑组使用.或者组标签来展示.组属性像下面来写：

 Text {

     font.pixelSize: 12

     font.bold: true

 }

或者像这样

 Text {

     font { pixelSize: 12; bold: true }

 }

在组属性的元素文档中都是使用.来标识

附加属性

一些对象附加属性给另外一些对象。附加的属性都是从Type.property获取，Type就是附加在属性上的类型

例如：

Component {

     id: myDelegate

     Text {

         text: "Hello"

         color: ListView.isCurrentItem ? "red" : "blue"

     }

 }

 ListView {

     delegate: myDelegate

 }

任何对象委托创建的时候，ListView元素附加在ListView.isCurrentItem属性。另外一个例子附加属性是keys元素，它附加属性处理任何键的按下的时候。例如：

 Item {

     focus: true

     Keys.onSelectPressed: console.log("Selected")

 }

信号处理

信号的处理是触发一个事件对动作的响应，例如，MouseArea元素拥有一个signal处理来处理鼠标的按下和释放

MouseArea {

     onPressed: console.log("mouse button pressed")

 }

信号处理属性都是由“on”开始，一些信号处理包括可选择的参数，例如MouseArea的onPressed就有一个mouse参数

 MouseArea {

     acceptedButtons: Qt.LeftButton | Qt.RightButton

     onPressed: if (mouse.button == Qt.RightButton) console.log("Right mouse button pressed")

 }