QML语法基础-Libero's Blog

QML是一种多范式语言，使您可以根据对象的属性以及它们如何关联和响应其他对象的更改来定义对象。与纯命令式代码相反，在该命令式代码中，属性和行为的更改通过一系列逐步处理的语句来表示，而QML的声明性语法将属性和行为的更改直接集成到单个对象的定义中。然后，在需要复杂的自定义应用程序行为的情况下，这些属性定义可以包括命令性代码。

引擎通常通过QML 文档（它们是QML代码的独立文档）加载QML源代码。这些可以用来定义QML对象类型，然后可以在整个应用程序中重用它们。请注意，类型名称必须以大写字母开头，以便在QML文件中声明为QML对象类型。

导入声明
一个QML文档可能在文件顶部具有一个或多个导入。导入可以是以下任意一项：

已注册类型的版本化名称空间（例如，通过插件）
包含类型定义作为QML文档的相对目录
一个JavaScript文件
导入JavaScript文件时，必须对其进行限定，以便可以访问它们提供的属性和方法。

各种进口的通用形式如下：

import Namespace VersionMajor.VersionMinor
import Namespace VersionMajor.VersionMinor as SingletonTypeIdentifier
import "directory"
import "file.js" as ScriptIdentifier

例子：

import QtQuick 2.0
import QtQuick.LocalStorage 2.0 as Database
import "../privateComponents"
import "somefile.js" as Script

对象声明
从语法上，QML 代码块定义要创建的 QML 对象的树。对象使用对象声明定义，这些声明描述要创建的对象类型以及要赋予对象的属性。每个对象还可以使用嵌套对象声明声明子对象。

对象声明由其对象类型的名称组成，后跟一组大括号。然后在这些大括号中声明所有属性和子对象。

下面是一个简单的对象声明：

Rectangle {
    width: 100
    height: 100
    color: "red"
}

这将声明一个类型为矩形的对象，后跟一组大括号，包含为该对象定义的属性。矩形类型是模块提供的类型，在这种情况下定义的属性是矩形的和属性的值。（这些属性由矩形类型提供，如矩形文档中所述。QtQuickwidthheightcolor

如果上述对象是 QML 文档的一部分，则该对象可以由引擎加载。也就是说，如果源代码辅以导入模块的导入语句（使矩形类型可用），如下所示：QtQuick

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100
    color: "red"
}

注：如果对象定义只有少量属性，则可以在这样一行上写入，其中属性用分号分隔：

Rectangle { width: 100; height: 100; color: "red" }

子对象
任何对象声明都可以通过嵌套对象声明定义子对象。这样，任何对象声明都隐式声明一个对象树，该对象树可能包含任何数量的子对象。

例如，下面的矩形对象声明包括渐变对象声明，该声明又包含两个渐变停止声明：

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

当引擎加载此代码时，它将创建一个对象树，根目录有矩形对象;当引擎加载此代码时，它将创建一个对象树。在根目录上加载此代码时，它将创建具有矩形对象的对象树。此对象具有渐变子对象，该对象又具有两个渐变停止子对象。

但是请注意，这是 QML 对象树上下文中的父子关系，而不是视觉场景的上下文中的父子关系。视觉场景中父子关系的概念由模块中的Item类型提供，这是大多数 QML 类型的基类型，因为大多数 QML 对象都打算直观地呈现。例如，矩形和文本都是基于项的类型，在下面，Text对象已声明为矩形对象的可视子对象：QtQuick

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, QML!"
    }
}

当Text对象引用其在上述代码中的父值时，它指的是其可视父值，而不是对象树中的父值。在这种情况下，它们是相同的：矩形对象是文本对象的父对象，在 QML 对象树的上下文中以及视觉场景的上下文中。但是，虽然可以修改父属性以更改可视父属性，但不能从 QML 更改对象树上下文中对象的父级。

（此外，请注意，Text对象已声明，而没有将其分配给矩形的属性，这与前面为矩形的属性分配了渐变对象的示例不同。这是因为Item 的子属性已设置为类型的默认属性，以启用此更方便的语法。gradient

注释
QML 中注释的语法与 JavaScript 的语法类似：

单行注释以 // 开始，并在行的末尾结束。
多行注释以 /* 开始，以 */ 结束

Text {
    text: "Hello world!"    //a basic greeting
    /*
        We want this text to stand out from the rest so
        we give it a large size and different font.
     */
    font.family: "Helvetica"
    font.pointSize: 24
}

文章版权归作者所有，未经允许请勿转载。

THE END