QML--基本语法

原创

贝勒里恩 2022-09-20 10:35:58 博主文章分类：Qt Quick ©著作权

©著作权归作者所有：来自51CTO博客作者贝勒里恩的原创作品，请联系作者获取转载授权，否则将追究法律责任

//MainForm.qml

import QtQuick 2.7  //导入Qt Quick 2.7库

Rectangle {  //根对象： Rectangle
    property alias mouseArea: mouseArea  //属性别名
    property alias textEdit: textEdit

    width: 360  //属性（宽度）
    height: 360  //属性（高度）

    MouseArea {  //子对象1: MouseArea
        id: mouseArea  //对象标识符
        anchors.fill: parent
    }

    TextEdit {  //子对象2: TextEdit
        id: textEdit
        text: qsTr("Enter some text...")
        verticalAlignment: Text.AlignVCenter
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.topMargin: 20
        Rectangle {  //子对象2的子对象: Rectangle
            anchors.fill: parent
            anchors.margins: -10
            color: "transparent"
            border.width: 1
        }
    }
}

1、对象和属性

每个QML文档有且只有一个根对象，在上述代码汇总就是一个Rectangle（矩形）对象。对象可以嵌套，即一个QML对象可以没有、可以有一个或多个子对象，例如在上述代码中，Rectangle有两个子对象：MouseArea和TextEdit，而子对象TextEdit本身又拥有一个子对象Rectangle。
对象由他们的类型指定，以大写字母开头，后面跟一对大括号{}，{}之中是该对象的属性，属性以键值对属性名: 值的形式给出，例如：

Rectangle {
  ...
  width: 360
  height: 360
  ...
}

定义了一个宽度和高度都是360像素的矩形。QML允许将多个属性写在一行，但它们之间必须用分号隔开，所以以上代码也可以写为：

Rectangle {
  ...
  width: 360; height: 360
  ...
}

对象MouseArea是可以响应鼠标事件的区域，作为子对象，它可以使用parent关键字访问其父对象。其属性anchors.fill起到布局作用，它会使MouseArea充满一个对象的内部，这里设值为parent表示MouseArea充满整个矩形，即整个窗口内部都是鼠标响应区。
TextEdit是一个文本编辑对象，属性text是其默认要输出显示的文本（Enter some text…），属性anchors.top、anchors.horizontalCenter和anchors.topMargin都是布局用的，这里设为使TextEdit处于矩形窗口的上部水平居中的位置，矩窗口顶部有20像素的边距。
本段代码开头的import语句导入了QtQuick模块（默认是Qt Quick2.7库），它包含所有的标准QML对象。如果没有这条语句，则无法使用根对象、两个子对象以及子对象的子对象。
QML文档中的各种对象及其子对象以这种层次结构组织在一起，共同描述一个可显示的用户界面。

2、对象标识符

每个对象都可以指定一个唯一的id值，这样便可以在其他对象中识别并引用该对象，例如：

MouseArea {
  ...
  id: mouseArea
  ...
}

就给MouseArea指定了id为mouseArea。可以在一个对象所在的QML文档中的任何地方，通过使用该对象的id来引用该对象。因此，id值在一个QML文档中必须是唯一的。对于一个QML对象而言，id值是一个特殊的值，不要把它看成一个普通的属性，例如，无法使用mouseArea.id来进行访问。一旦一个对象被创建，它的id就无法被改变了。

注意：id值必须使用小写字母或以下划线开头，并且不能使用除字母、数组和下划线外的字符。

3、属性别名

属性也可以有别名，QML使用alias关键字声明属性的别名：property alias 别名: 属性名，例如：

Rectangle {
  property alias mouseArea: mouseArea
  property alias textEdit: textEdit
  ...
  MouseArea {
    id: mouseArea
    ...
  }
  TextEdit {
    id: textEdit
    ...
  }
}

这里把MouseArea看成Rectangle的一个属性（QML中的子对象也可以视为其父对象的属性），取其id（mouseArea）为属性名，并给它定义一个别名“mouseArea”，这样做的目的是为了在外部QML文档（main.qml）中也能访问到MouseArea。因为MouseArea内置了一个onClicked属性，它是一个回调（鼠标点击事件），定义了别名后，就可以在main.qml代码中访问这个属性：

mouseArea.onclicked: {
  console.log(qsTr('Clicked on background. Text: "' + textEdit.text + '"'))
}

当单击事件发出时，就会执行onClicked中的代码，在开发环境底部的“应用程序输出”子窗口中输出文本：“qml: Clicked on background. Text: “Hello World!””。同理，TextEdit也可以看成Rectangle的一个属性，并为其定义别名和引用。
由此可见，属性别名对于允许外部对象直接修改和访问另一个QML文档中的子对象很有用。