【Qt之Quick模块】4. QML语法格式及命名规范

概述

QML（Qt Meta-Object Language）是一种声明式语言，用于设计用户界面。它是由Qt框架提供的一种描述界面组件的语言，可以与C++代码结合使用，用于创建跨平台的应用程序。

QML具有以下特点：

1. 声明式：QML使用类似于JavaScript的语法，通过描述界面组件的属性和行为来创建用户界面。它不需要编写繁琐的布局和控件代码，使界面设计更加简洁和直观。

2. 跨平台：QML可以在多个平台上运行，包括Windows、Linux、macOS、Android和iOS等。它提供了各种预定义的界面组件，可以适应不同的设备和操作系统。

3. 可扩展：QML支持自定义组件的创建和重用。开发人员可以定义自己的QML类型，并将其用作其他QML组件的构建块。这种扩展性使得在QML中创建复杂的用户界面变得更加容易。

4. 可视化编辑器：Qt Creator是Qt框架提供的开发工具，集成了QML的可视化编辑器。开发人员可以通过拖放和属性编辑的方式设计界面，无需编写代码。这种可视化编辑器大大提高了开发效率。

QML可以与C++代码结合使用，以实现更复杂的功能。可以通过QML调用C++的函数和对象，反之亦然。这种混合编程的能力使得开发人员可以充分利用Qt框架提供的功能，并且可以使用不同语言的优势进行开发。

QML格式

QML（Qt Meta-Object Language）是基于JavaScript的声明性语言，关键点来了，它不是描述性语言，它是声明性语言，用于描述用户界面的结构和行为。以下呢是QML语言的基本格式：

1. 导入模块：

import 模块名称 版本号

导入需要使用的模块，可以使用原生的Qt模块，也可以使用自定义的模块。

2. 定义元素：

元素类型 {
    属性1: 值1
    属性2: 值2
    ...
    子元素1 {
        ...
    }
    子元素2 {
        ...
    }
    ...
}

使用元素类型创建一个新的元素，可以指定属性和子元素，并使用大括号包围元素的内容。

3. 定义属性：

属性名称: 值

定义一个属性，并将其赋予一个值。

4. 使用JavaScript代码：

JavaScript代码

可以在QML文件中使用JavaScript代码，用于处理用户交互、计算等逻辑。

5. 信号和槽：

signal 信号名称(参数类型1, 参数类型2, ...)

定义一个信号。

on信号名称: {
    槽函数
}

使用信号与槽连接。

6. 事件处理：

Element {
    MouseArea {
        onClicked: {
            ...
        }
    }
}

使用MouseArea元素处理鼠标点击事件。

以下是一个关于QML格式的小栗子，主要展示了QML语言的基本格式和用法：

import QtQuick 2.15

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

    Text {
        text: "Hello, QML!"
        font.pixelSize: 20
        color: "white"
        anchors.centerIn: parent
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            console.log("Rectangle clicked!")
            Text.text = "Clicked!"
        }
    }
}

示例中，

• 首先，导入了QtQuick模块的2.15版本
• 其次，创建了一个名为Rectangle的元素，设置了宽度、高度和背景颜色
• 在Rectangle元素内部，创建了一个Text元素，设置了文本内容、字体大小和颜色，并使用anchors.centerIn将其居中显示
• 之后，创建了一个MouseArea元素，将其填充到父元素中，并在onClicked事件中添加了一段JavaScript代码。当鼠标点击Rectangle区域时，控制台将输出一条消息，并将Text元素的文本内容设置为"Clicked!"。

QML类型

QML文件的类型并不是以文件名称来确定的，而是根据文件的内容和扩展名来确定的。通常，QML文件的扩展名为".qml"。

在QML中，可以创建多个类型的文件，例如：

• Item类型的文件，用于创建可重复使用的组件。
• Window类型的文件，用于创建应用程序的主窗口。
• Component类型的文件，用于定义可嵌套的组件。

当然，QML文件的类型也可以通过文件名的约定来表示，例如使用"Item.qml"表示Item类型的文件，使用"Window.qml"表示Window类型的文件。这种命名约定对于开发者来说是一种约定俗成的做法，并不是QML语言本身的规定。

QML自定义类型

在QML中，可以自定义类型，并且自定义类型的命名并不一定与文件名称相同。

QML中的自定义类型是通过将多个QML文件组织在一起来创建的。一般而言，一个自定义类型会包含一个独立的QML文件，其中定义了该类型的属性、信号、方法等。

在QML文件中，可以使用"import"语句导入其他QML文件或模块，并将其作为自定义类型来使用。这意味着，自定义类型的名称是由导入的QML文件或模块中定义的，而不是由文件名称决定的。

举个例子，假设有一个名为"CustomButton.qml"的文件，其中定义了一个CustomButton类型。然后，可以在其他QML文件中导入并使用这个自定义类型：

import QtQuick 2.0
import "CustomButton.qml" // 导入自定义类型

Item {
    CustomButton {
        // 属性设定，信号绑定等
    }
}

在上面的例子中，"CustomButton.qml"文件定义了CustomButton类型，但是并没有把自定义类型的名称与文件名称直接关联。

QML导入别的QML文件

在QML中，可以使用import语句导入其他的QML文件。导入的QML文件可以是自定义类型的定义、QML模块，或者是其他已经导出为QML的组件。

例如，假设有一个名为Button.qml的文件，其中定义了一个自定义的按钮类型：

import QtQuick 2.0

Rectangle {
    width: 100
    height: 50

    property string text: "Button"

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("Button clicked")
    }

    Text {
        anchors.centerIn: parent
        text: parent.text
    }
}

然后，在另一个QML文件中可以使用import语句导入并使用该自定义的按钮类型：

import QtQuick 2.0
// 导入Button.qml文件
import "Button.qml"

Item {
    Button {
        text: "Click me"
    }
}

通过导入Button.qml文件，可以在另一个QML文件中使用Button类型的实例。可以给实例的属性赋值、监听信号等。这样就可以重用Button.qml文件中定义的按钮组件了。

QML文件命名规范

QML文件的命名没有固定的规定，可以根据开发者的喜好和项目的需要进行命名。通常情况下，QML文件的命名可以与其中定义的自定义类型或组件相关联，以便更好地组织和管理代码。

例如，如果一个QML文件定义了一个名为Button的自定义按钮组件，可以将该文件命名为Button.qml，这样可以更清晰地表示该文件与按钮组件的关系。

但是，QML文件的名称并不直接影响它们在应用程序中的使用。在导入和使用QML文件时，可以使用任何名称来引用它们，只需要确保路径和文件名的拼写和大小写是正确的。

总之，QML文件的名称是开发者自己定义的，应该能够清晰地表示文件的用途和内容，以方便代码的组织和维护。