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

FreeLikeTheWind.

已于 2023-12-22 19:23:17 修改

阅读量1.5k

点赞数 36

分类专栏： Qt之QML编程文章标签： qt 开发语言

于 2023-12-21 22:48:43 首次发布

本文链接：https://blog.csdn.net/MrHHHHHH/article/details/135127788

版权

Qt之QML编程专栏收录该内容

10 篇文章 4 订阅

订阅专栏

概述

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

QML具有以下特点：

声明式：QML使用类似于JavaScript的语法，通过描述界面组件的属性和行为来创建用户界面。它不需要编写繁琐的布局和控件代码，使界面设计更加简洁和直观。
跨平台：QML可以在多个平台上运行，包括Windows、Linux、macOS、Android和iOS等。它提供了各种预定义的界面组件，可以适应不同的设备和操作系统。
可扩展：QML支持自定义组件的创建和重用。开发人员可以定义自己的QML类型，并将其用作其他QML组件的构建块。这种扩展性使得在QML中创建复杂的用户界面变得更加容易。
可视化编辑器：Qt Creator是Qt框架提供的开发工具，集成了QML的可视化编辑器。开发人员可以通过拖放和属性编辑的方式设计界面，无需编写代码。这种可视化编辑器大大提高了开发效率。

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

QML格式

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

导入模块：

import 模块名称 版本号

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

定义元素：

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

使用元素类型创建一个新的元素，可以指定属性和子元素，并使用大括号包围元素的内容，一个QML文件中只有最外侧一个大括号。

定义属性：

属性名称: 值

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

使用JavaScript代码：

JavaScript代码

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

信号和槽：

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

定义一个信号。

on信号名称: {
    槽函数
}

使用信号与槽连接。

事件处理：

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模块通过c++注册
由QML模块作为QML文档提供
应用程序开发人员可以通过直接注册c++类型，或者通过在QML文档中定义可重用的组件(然后可以导入)来提供自己的类型

QML文件

在QML中，一个文件通常对应一个元素或组件。

QML文件是用于描述用户界面的脚本文件，可以包含一个或多个元素或组件的定义。每个元素或组件都由一个QML文件来描述，该文件定义了该元素或组件的属性、信号和方法等信息。

在QML文件中，通常会以一个根元素开始，该根元素可以是任何QML元素，例如Rectangle、Item、Text等。这个根元素可以包含其他子元素，形成一个元素的层次结构。

每个QML文件可以看作是一个独立的模块，可以在其他QML文件中引用和使用。在引用一个QML文件时，我们实际上是在使用该文件所描述的元素或组件。

如：
可以创建一个MyButton.qml文件，其中定义了一个自定义按钮的外观和行为。然后在其他QML文件中使用该MyButton组件，就可以重复利用这个自定义按钮的定义，而不用编写重复的代码。这样，每个QML文件都可以表示一个独立的元素或组件。

当然，有些时候一个QML文件可以定义多个相关联的元素或组件，但通常建议将每个元素或组件放在单独的QML文件中，以提高代码的可维护性和复用性。

简单来说就是，一个QML文件通常表示一个元素或组件，该文件定义了该元素或组件的属性、行为和外观等信息，可以在其他QML文件中引用和使用。

QML文件命名规范

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

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

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

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

QML文件名称是否是元素名称或元素类型

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

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

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

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

在QML中，元素的名称实际上就是元素的类型。比如，Text元素的名称就是Text。

在QML中，使用元素的名称来创建该类型的元素。例如，要创建一个Text元素，可以直接使用其名称Text，如下所示：

Text {
    // Text元素的属性和子元素
}

Text就是Text元素的名称，它表示创建一个Text类型的元素。

QML中有许多内置的元素类型，每个类型都有自己的名称，比如Rectangle、Image、Button等。可以根据需要使用这些元素类型来创建想要的界面。

同时，也可以通过自定义元素类型来创建自定义的元素，并为它们定义属性和行为。

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.qml"的文件，其中定义了一个自定义按钮元素。可以在其他文件中引用这个自定义按钮元素并使用它。
Button.qml:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 40
    color: "blue"

    Text {
        text: "Click Me!"
        anchors.centerIn: parent
    }
}

Main.qml:

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200

    Button {}
}

在上述示例中，使用了Button.qml文件中定义的自定义按钮元素。在Main.qml中直接使用Button元素，不需要为它设置id属性，因为没有特定引用它的需求。

通过QML文件的名称，可以在其他文件中引用并使用其中的元素。这为之后在QML中组织和重用代码提供了便利。

QML文件的名称具体作用

QML文件的名称主要用于以下两个方面：

作为元素的类型引用：QML文件的名称可以作为元素的类型引用。当在一个QML文件中定义一个元素时，可以在其他QML文件或同一个文件中使用该元素，只需使用该元素所属的QML文件的名称作为类型。这样，可以通过QML文件的名称来创建和使用元素。
作为文件的引用：QML文件的名称也可以用于在其他QML文件中引用该文件。当一个QML文件依赖于其他QML文件时，可以使用该文件的名称来导入和使用其中的元素。这样，可以在不同的QML文件间建立依赖关系，方便模块化开发和代码重用。

需要注意的是，元素的类型引用和文件的引用是不同的概念。元素的类型引用是通过QML文件的名称来引用其中的元素，而文件的引用则是通过导入语句来引用其他QML文件。

总结来说，QML文件的名称用于标识文件中定义的元素的类型，同时也可以用于在其他文件中引用该文件。通过使用QML文件的名称，可以方便地创建、使用和组织QML元素。

以下是举例说明：
当QML文件作为元素的类型引用时，可以在其他QML文件或同一个文件中使用该元素，通过使用QML文件的名称作为类型来创建和使用元素。

例如，假设有一个名为"Button.qml"的文件，其中定义了一个自定义按钮元素。之后可以在其他文件中引用这个自定义按钮元素并使用它。

Button.qml:

import QtQuick 2.0

Rectangle {
    width: 100
    height: 40
    color: "blue"

    Text {
        text: "Click Me!"
        anchors.centerIn: parent
    }
}

Main.qml:

import QtQuick 2.0

Rectangle {
    width: 200
    height: 200

    Button {} // 使用Button.qml文件中定义的自定义按钮元素
}

示例中，首先使用了Button.qml文件中定义的自定义按钮元素。之后在Main.qml中直接使用Button元素，不需要为它设置id属性，只需使用Button作为类型引用即可。通过QML文件的名称，可以方便地创建和使用元素。

当QML文件作为文件的引用时，可以使用导入语句将其他QML文件导入到当前文件中，以便引用其中的元素。

例如，有一个名为"Utils.qml"的文件，其中定义了一些通用的工具函数和常量。之后可以在其他QML文件中导入"Utils.qml"，以便使用其中的工具函数和常量。

Utils.qml:

pragma Singleton
import QtQuick 2.0

function formatDateTime(dateTime) {
    // 格式化日期和时间的函数
    // ...
}

const MAX_VALUE = 100;

Main.qml:

import QtQuick 2.0

import "Utils.qml" as Utils // 导入Utils.qml，并将其命名为Utils

Rectangle {
    width: 200
    height: 200

    Text {
        text: Utils.formatDateTime(new Date()) // 使用Utils.qml中的函数
    }

    Text {
        text: Utils.MAX_VALUE // 使用Utils.qml中的常量
    }
}