【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中定义内容，例如：// MyType.qml import QtQuick 2.0 Text { text: "MyType Text" }这里我们创建了一个简单的
Text元素，以便验证文件是否被成功调用。
在主 QML 文件中使用自定义类型
在主 QML 文件（如 main.qml）中使用自定义类型 MyType：
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。其一般格式如下：
import 库名称 版本号 as 命名空间
例如，以下代码导入了 QtQuick 库的 6.0 版本：
import QtQuick 6.0
库的名称与版本号
- 库名称：导入的库名称可以是系统自带的库，如
QtQuick、QtQuick.Controls等，也可以是自定义的库。 - 版本号：版本号通常包括主版本号和次版本号（例如
6.0）。在 QML 中，通过指定版本号来确保使用特定的 API 版本。如果不指定版本号，默认会使用安装的最新版本。 - 版本兼容性：QML 支持兼容多个版本的库，因此可以同时提供新版本和旧版本的兼容支持。例如，可以导入
6.0版本的库，但如果项目需要兼容较低版本，则可以同时提供多个版本的实现。
解决命名冲突
当导入多个库时，有可能会遇到命名冲突的问题，比如多个库中都存在同名组件。为了解决这种问题，可以使用 as 关键字为导入的库指定一个别名，这样就可以通过别名来访问库中的组件。
例如，以下代码导入了 QtQuick.Controls 并为其指定了别名 CON：
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:import QtQuick 2.0 Text { text: "This is Type 1" }Type2.qml:import QtQuick 2.0 Text { text: "This is Type 2" } -
步骤 3：在主文件中导入整个目录。
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 类型，而不需要逐个导入每个文件。