一、QML语法基础

import QtQuick 2.2

Rectangle {
    width: 400
    height: 200
    color: "blue"
    Image {
        source: "image/log.png"
        anchors.centerIn: parent
    }
}

• 导入语句（import）

类似于python中的导入方式，如上。

• 对象（object）和属性（property）

QML文档就是一个对象树。上面这段代码中，创建了两个对象：Rectangle对象和他的子对象Image。QML对象由他们的类型（type）指定，以大写字母开头，后面跟随一对大括号。

打括号中包含了对象的特性定义，比如这个对象的属性值或其子对象；属性通过 “属性：值”的语法进行初始化，不同属性可以向上面一样放在多行，也可以放在一行，如下：

Rectangle { width: 400; height:400 }

• 布局

如上Image的anchors.centerIn起到了布局的作用。它会使Image处于一个对象的中间位置。除了anchors，QML还提供了很多其他布局方式。

• 注释

QML的注释和C/C++的注释相似：

1. 单行注释使用“//”开始，直到行末结束
2. 多行注释使用“/*”开始，以“*/”结尾

• 表达式

JavaScript表达式可以用于设置属性的值，表达式可以是常量表达式也可以是包含其他对象或属性的表达式

Iterm {
    width: 500 + 100
    height: 200 * 2
    Rectangle {
        width: parent.width - 200
        height: width * 0.6
        color: "yellow"
        anchors.centerIn: parent
    }
}

上面Iterm的width是常量表达式，而它的子对象rectangle的width则绑定了他的width属性，当Iterm的width发生改变时，Rectangle的width也会动态随之改变。

• 调试输出

在QML代码中使用可以和console.log()和console.debug()来输出调试信息，它类似于进行Qt C++编程时使用的qDebug()。

Rectangle {
    width: 70
    height: 30
    color: "green"
    
    MouseArea {
        anchors.fill: parent
        onClicked: console.log("矩形的颜色：", color)
    }
}