【QT Quick】基础语法：导入外部QML文件

在实际项目中，代码通常分为多个文件进行模块化管理，这样可以方便代码重用，例如统一风格或共享功能模块。我们将在此部分学习如何创建 QML 项目，并演示如何访问外部代码，包括其他 QML 文件、库文件以及 JS 代码。

准备开发环境

在开发环境方面，我们尽量只使用纯 QML，不结合 C++，这样就可以避免频繁编译。建议使用以下两种工具之一进行开发：

VS Code + 命令行：可以通过命令行来执行 QML 文件。
Qt Creator：在课程中，我们选择使用 Qt Creator 来创建项目。Qt Creator 提供了 Qt Quick UI 原型系统，用于快速验证 QML 语法。以下是使用 Qt Creator 创建项目的步骤：
- 打开 Qt Creator，选择创建一个 "Qt Quick 项目"（即 UI 原型系统），该类型的项目不需要 C++ 代码。
- 确定项目配置，如 SDK 和工具链设置。
- 项目创建后，生成了一个默认的 QML 项目结构，包括入口文件 main.qml。

访问同一目录下的文件

在 QML 项目中，如果我们希望引用同一目录下的其他 QML 文件，可以通过以下方式实现：

文件名必须以大写字母开头。
直接使用文件名作为类型名，不需要导入（import）任何内容。

创建新的 QML 文件

在项目目录下创建一个新文件，命名为 MyType.qml（文件名首字母必须大写）。
在 MyType.qml 中定义内容，例如：
qml 复制代码
```
// MyType.qml
import QtQuick 2.0
   
Text {
    text: "MyType Text"
}
```
这里我们创建了一个简单的 Text 元素，以便验证文件是否被成功调用。

在主 QML 文件中使用自定义类型

在主 QML 文件（如 main.qml）中使用自定义类型 MyType：

qml 复制代码

import QtQuick 2.0

Rectangle {
    width: 400
    height: 400

    MyType {
        anchors.centerIn: parent
        x: 100
        y: 50
    }
}

这里我们直接使用 MyType，将其作为一个组件插入到主界面中。
可以对自定义类型的属性进行调整，例如位置 x 和 y，或者使用 anchors 进行布局。

验证结果

运行项目时，您应该会看到自定义类型 MyType 的 Text 显示在界面上。这样就成功演示了如何在同一目录下访问其他 QML 文件。

访问外部文件

在 QML 中，可以使用 import 关键字访问外部库。这种方式非常类似于 C++20 及其他现代编程语言中导入外部模块的方式。我们将在这一章节中了解如何导入 QML 系统库以及自定义库，并讨论可能遇到的命名冲突问题。

`import` 语法

在 QML 中导入外部库时，通常需要指定库的名称、版本号以及可选的命名空间标识符 as。其一般格式如下：

qml 复制代码

import 库名称 版本号 as 命名空间

例如，以下代码导入了 QtQuick 库的 6.0 版本：

qml 复制代码

import QtQuick 6.0

库的名称与版本号

库名称 ：导入的库名称可以是系统自带的库，如 QtQuick、QtQuick.Controls 等，也可以是自定义的库。
版本号 ：版本号通常包括主版本号和次版本号（例如 6.0）。在 QML 中，通过指定版本号来确保使用特定的 API 版本。如果不指定版本号，默认会使用安装的最新版本。
版本兼容性 ：QML 支持兼容多个版本的库，因此可以同时提供新版本和旧版本的兼容支持。例如，可以导入 6.0 版本的库，但如果项目需要兼容较低版本，则可以同时提供多个版本的实现。

解决命名冲突

当导入多个库时，有可能会遇到命名冲突的问题，比如多个库中都存在同名组件。为了解决这种问题，可以使用 as 关键字为导入的库指定一个别名，这样就可以通过别名来访问库中的组件。

例如，以下代码导入了 QtQuick.Controls 并为其指定了别名 CON：

qml 复制代码

import QtQuick.Controls 6.0 as CON

Rectangle {
    width: 400
    height: 400

    // 使用带有命名空间的 Button 组件
    CON.Button {
        text: "This is a button from QtQuick.Controls"
        anchors.centerIn: parent
    }
}

通过这种方式，即使导入了多个库中存在同名的 Button，也可以通过别名来区分不同的库。

导入目录中的代码

在实际项目开发中，我们可能会将多个相关的 QML 文件放入一个目录中，这些文件可以被当作一个整体导入到主项目中。这样可以减少逐个导入的麻烦，并提高代码组织的清晰度。

步骤 1 ：在项目目录下创建一个新目录，例如 MyDir。
步骤 2 ：在 MyDir 目录中创建多个 QML 文件，例如 Type1.qml 和 Type2.qml。

Type1.qml:
qml 复制代码
```
import QtQuick 2.0

Text {
    text: "This is Type 1"
}
```
Type2.qml:
qml 复制代码
```
import QtQuick 2.0

Text {
    text: "This is Type 2"
}
```

步骤 3：在主文件中导入整个目录。

qml 复制代码

import "MyDir"

Rectangle {
    width: 400
    height: 400

    // 使用目录中定义的类型
    Type1 {
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
    }

    Type2 {
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
    }
}

通过导入整个目录，可以使用该目录中的所有 QML 类型，而不需要逐个导入每个文件。

【QT Quick】基础语法：导入外部QML文件

准备开发环境

访问同一目录下的文件

创建新的 QML 文件

在主 QML 文件中使用自定义类型

验证结果

访问外部文件

import 语法

库的名称与版本号

解决命名冲突

导入目录中的代码

`import` 语法