QML入门之基本语法

       QML是一个类似HTML、XML的标记语言，能够快速进行前端界面开发，让前端人员与服务器人员能够真正做到前后端分离，而不像QWigets那样，既要关心界面又要关心后台逻辑，当然这里说的后台并不一定☞服务器后台，广义上讲，除过前台界面外的逻辑都可称为后台。

        QML可以混合JavaScript进行交互逻辑的编写。QML的父子节点即整个界面的逻辑关系。每个节点都是一个元素，其坐标总是基于父节点，但其位置，可以是相对于界面中任意元素而言。

        在QML中Window、ApplicationWindow、Rectangle、Item、MouseArea等都是组成这个界面的基本和骨架元素。当然还有很多很多，那我们来先初步学习一下吧。

        先给一个简单的qml文件。

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
  id:root
  visible: true
  width: 640
  height: 480
  title: qsTr("简单窗口")
  Rectangle {
    id: rect
    anchors.centerIn: parent
    width: 200
    height:200
    color: "red"
    Text {
      anchors.centerIn: parent
      horizontalAlignment: Text.AlignHCenter
      verticalAlignment: Text.AlignVCenter
      font.bold: true
      font.pointSize: 12
      text: "Hello World!"
      color: "yellow"
      MouseArea {
        anchors.fill:parent
        onClicked:{
          console.log(qsTr("点击了文字"));
        }
      }
    }
  }  
}

•  import同我们#include作用一样，引入你需要的模块。
• Window是窗口，即这个qml文件的根元素，每个qml文件都需要根元素。
• 元素后直接跟{}大括号，属性、槽函数后跟冒号：，函数内正常使用js语法。
• 一般你可以直接命名根元素id为root。之后就用root去访问根元素了。id是一个特殊的属性，其值仅仅是个标识，并不需要双引号引起来。
• 自定义属性需要使用property去修饰，其后跟类型，在其后跟属性名，冒号，属性值。
• 一个重要的声明属性的方法是使用alias关键字（property alias : ）。alias关键字允许我们转发一个属性或者转发一个属性对象自身到另一个作用域。我们将在后面定义组件导出内部属性或者引用根级元素id会使用到这个技术。一个属性别名不需要类型，它使用引用的属性类型或者对象类型。