1. QML文件基本构成与结构分析(类比ECMAScript)

QML本身是一种语言(Qt元对象语言),语法遵循ECMAScript的语法，与javaScript语法兼容，因此在qml页面中，复杂逻辑可以使用js模块单独处理，简单逻辑直接内嵌js函数即可(也可注册Qt C++类)。下边根据一个简单的qml文件分析qml的语法结构

//main.qml
import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    id:root
    visible: true
    width: 640
    height: 480
    title: qsTr("Window Test")
    flags: Qt.FramelessWindowHint
    property int testProperty: 0
    property alias myAnimation:majorAnimation
    MyRect{
        anchors.fill: parent
    }
    MouseArea{
        anchors.fill: parent
        onClicked: {
            var x = 10;
            myAnimation.start();
        }
    }
    PropertyAnimation{
        id:majorAnimation
        target: root
        property:"x"
        from: 0
        to:1500
        duration: 1500
        easing.type: Easing.InOutQuad
        onFinished: {
            testProperty = 1
        }
    }
    Component.onCompleted: {
        console.debug("current pluging load finish\n");
    }
    onTestPropertyChanged: {
        console.log("testProperty value is: " + testProperty)
    }
}

1.2 语法结构分析

1.2.1 import语句

import与c/c++的include语句类似，此处是导入Quick的内置模块，本身也支持导入外部模块，比如QObject的子类类型或原生的js类型，在导入C++类型是需要注册，import xxx as yyy语句表示给当前xxx模块起个别名叫做yyy，以后就直接用yyy来取代xxx

1.2.2 Window{}的含义

结合ECMAScript对象的定义，ECMAScript的对象即为一系列无序属性的集合，此处的Window{}即为一个Window对象，对象的访问使用对象id来访问，id属性没有被设置的对象为匿名对象。

1.2.3 xxx:XValue的含义

这种用：隔开的，代表xxx属性的值是XValue，这与CSS的语法相似，定义当前属性的值，当值发生变化时，需要使用xxx = XValue来修改

1.2.4 property与alias的含义

在QML中，property用来声明定义一个对象的额外属性，这与在Qt C++中使用Q_PROPERTY宏来声明一个类属性类似，而alias关键字是给当前某个对象或属性起一个别名类似c中的typedef,以后就可以不直接使用对象，而是使用对象别名，来访问对象方法或属性

1.2.5 MyRect自定义对象

QML支持自定义对象，一般地一个qml文件就是一个对象，对象在定义时，首字母必须是大写，这与对象的id属性刚好相反，对象id属性要求首字母必须小写。

//MyRect.qml
import QtQuick 2.12
Item {
    id:root
    Rectangle{
        anchors.fill: parent
        color:"#646464"
    }
}

1.2.6 onSignalChange:{} or onPropertyChange:{}

qml中当属性或信号值发生变化时，使用on+Signal(信号名字首字母大写)+Change的方式来处理信号或属性的变化，此处的{}看作是Qt c++中的槽函数，{}中的就是函数体，函数体内可以调用函数，定义函数或lambda表达式，定义变量等一系列操作，这有别于object的属性:值

1.3 QML模块划分

一般地，QML对象可以单独处理为一个qml文件，以供外部调用，或者内嵌在其它QML文件中使用，为了结构清晰，尽可能将模块划分清楚，使用单独的qml文件编写功能相对独立的模块。

小知识

- [1] 原文件或资源文件中的qml，可以右键使用quick designer 打开，从而快速布局/预览页面

- [2] 对于QML处理不了的非页面类复杂逻辑推荐使用js来单独处理，或编写单独的Qt c++处理类，之后注册导入

QML基本语法与构成规则

1. QML文件基本构成与结构分析(类比ECMAScript)

1.2 语法结构分析

1.3 QML模块划分

小知识