QML笔记（五）：QML语法

1，QML是一种声明语言，用于描述程序界面
2，QMl将用户界面分割成一块块小的元素，每一块元素都由很多组件构成
3，QML定义了用户界面的外观和行为，更复杂的逻辑可以结合JavaScript脚本实现，或者在c++里面实现
4，QML最简单的元素关系是层次关系，子元素处于相对父元素的坐标系统中，这样不论界面怎么变，子元素始终相对于父元素
示例：

//包含的模块（相当于头文件）
import QtQuick 2.0
import QtQuick.Window 2.2
Window {
	//根元素
    id: window //唯一id，用来识别
    visible: true //界面是否显示
    width: 640 //宽
    height: 480 //高
    title: qsTr("Hello World") //标题
    //声明一个嵌套元素（根元素的子元素）
	Text {
        id: child //子元素id
        x: window/8 //相对于父元素x位置
        y: window/8 //相对于父元素y位置
        width: parent.width/10 //使用parent引用父元素
        height: 20 //自定义大小
        text: qsTr("frist qml") //文本内容
        font.pixelSize: 12 //字体大小（还有其他设置，比如字体，颜色，样式。。。）
    } 
}

5，QML 文档总要有 import 部分，用于指定该文档所需要引入的模块（由模块名和版本号构成）
6，QML元素，一个QML文档有且只有一个根元素，每一个元素都有唯一的id属性，这个id也是唯一的，可以用这个id名引用该元素，相对于该元素的指针；QML元素允许嵌套，一个QML元素可以有一个多个或者多个子元素，子元素可以用parent访问父元素
7，QML的注释使用 // 或者/* */

Text { 
    // (1) 标识符 
    id: thisLabel 
    // (2) x、y 坐标 
    x: 24; y: 16 
    // (3) 绑定 
    height: 2 * width 
    // (4) 自定义属性 
    property int times: 24 
    // (5) 属性别名 
    property alias anotherTimes: times 
    // (6) 文本和值 
    text: "Greetings " + times 
    // (7) 字体属性组 
    font.family: "Ubuntu" 
    font.pixelSize: 24 
    // (8) 附加属性 KeyNavigation 
    KeyNavigation.tab: otherLabel 
    // (9) 属性值改变的信号处理回调 
    onHeightChanged: console.log('height:', height) 
    // 接收键盘事件需要设置 focus 
    focus: true 
    // 根据 focus 值改变颜色 
    color: focus?"red":"black" 
}

8，id的命名规则和c++规则一样，id一定是在当前QML文件中唯一的！
9，元素的属性可以依赖于其他元素，这种行为叫做绑定，类似信号和槽机制，当依赖的属性发生变化时，绑定的这个元素也会自动更新
10，属性可以分组，这样更具有结构化，看起来简洁

Text {
 width: 640 //宽
 height: 480 //高
 }

可以写成如下：
Text {width: 640 ; height: 480 }

11，每一个属性都可以发出信号，所以都可以关联信号处理函数，处理函数会在属性值发生变化时调用，这种变化的信号槽命名为on + 属性名 + changed ，属性名要首字母大写，
例如：width属性发生变化时对应的槽函数名
onWidthChanged
12，QML和JavaScript，示例：

Text { 
    id: label 
    x: 24; y: 24 
    // 自定义属性，表示空格按下的次数  
      property int spacePresses: 0 
    text: "Space pressed: " + spacePresses + " times" 
    // (1) 文本变化的响应函数，使用控制台输出信息 
    onTextChanged: console.log("text changed to:", text) 
    // 接收键盘事件，需要设置 focus 属性 
    focus: true 
    // (2) 调用 JavaScript 函数 
    Keys.onSpacePressed: { 
        increment() 
    } 
    // 按下 Esc 键清空文本 
    Keys.onEscapePressed: { 
        label.text = '' 
    } 
    // (3) 一个 JavaScript 函数 
    function increment() { 
        spacePresses = spacePresses + 1 
    } 
}