在實(shí)際項(xiàng)目中，代碼通常分為多個文件進(jìn)行模塊化管理，這樣可以方便代碼重用，例如統(tǒng)一風(fēng)格或共享功能模塊。我們將在此部分學(xué)習(xí)如何創(chuàng)建 QML 項(xiàng)目，并演示如何訪問外部代碼，包括其他 QML 文件、庫文件以及 JS 代碼。

準(zhǔn)備開發(fā)環(huán)境

在開發(fā)環(huán)境方面，我們盡量只使用純 QML，不結(jié)合 C++，這樣就可以避免頻繁編譯。建議使用以下兩種工具之一進(jìn)行開發(fā)：

• VS Code + 命令行：可以通過命令行來執(zhí)行 QML 文件。

• Qt Creator：在課程中，我們選擇使用 Qt Creator 來創(chuàng)建項(xiàng)目。Qt Creator 提供了 Qt Quick UI 原型系統(tǒng)，用于快速驗(yàn)證 QML 語法。以下是使用 Qt Creator 創(chuàng)建項(xiàng)目的步驟：

  • 打開 Qt Creator，選擇創(chuàng)建一個 “Qt Quick 項(xiàng)目”（即 UI 原型系統(tǒng)），該類型的項(xiàng)目不需要 C++ 代碼。

  • 確定項(xiàng)目配置，如 SDK 和工具鏈設(shè)置。

  • 項(xiàng)目創(chuàng)建后，生成了一個默認(rèn)的 QML 項(xiàng)目結(jié)構(gòu)，包括入口文件 main.qml。

訪問同一目錄下的文件

在 QML 項(xiàng)目中，如果我們希望引用同一目錄下的其他 QML 文件，可以通過以下方式實(shí)現(xiàn)：

• 文件名必須以大寫字母開頭。
• 直接使用文件名作為類型名，不需要導(dǎo)入（import）任何內(nèi)容。

創(chuàng)建新的 QML 文件

• 在項(xiàng)目目錄下創(chuàng)建一個新文件，命名為 MyType.qml（文件名首字母必須大寫）。

• 在 MyType.qml 中定義內(nèi)容，例如：

  // MyType.qml
  import QtQuick 2.0Text {text: "MyType Text"
  }
  

  這里我們創(chuàng)建了一個簡單的 Text 元素，以便驗(yàn)證文件是否被成功調(diào)用。

在主 QML 文件中使用自定義類型

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

import QtQuick 2.0Rectangle {width: 400height: 400MyType {anchors.centerIn: parentx: 100y: 50}
}

• 這里我們直接使用 MyType，將其作為一個組件插入到主界面中。
• 可以對自定義類型的屬性進(jìn)行調(diào)整，例如位置 x 和 y，或者使用 anchors 進(jìn)行布局。

驗(yàn)證結(jié)果

運(yùn)行項(xiàng)目時，您應(yīng)該會看到自定義類型 MyType 的 Text 顯示在界面上。這樣就成功演示了如何在同一目錄下訪問其他 QML 文件。

訪問外部文件

在 QML 中，可以使用 import 關(guān)鍵字訪問外部庫。這種方式非常類似于 C++20 及其他現(xiàn)代編程語言中導(dǎo)入外部模塊的方式。我們將在這一章節(jié)中了解如何導(dǎo)入 QML 系統(tǒng)庫以及自定義庫，并討論可能遇到的命名沖突問題。

import 語法

在 QML 中導(dǎo)入外部庫時，通常需要指定庫的名稱、版本號以及可選的命名空間標(biāo)識符 as。其一般格式如下：

import 庫名稱 版本號 as 命名空間

例如，以下代碼導(dǎo)入了 QtQuick 庫的 6.0 版本：

import QtQuick 6.0

庫的名稱與版本號

• 庫名稱：導(dǎo)入的庫名稱可以是系統(tǒng)自帶的庫，如 QtQuick、QtQuick.Controls 等，也可以是自定義的庫。
• 版本號：版本號通常包括主版本號和次版本號（例如 6.0）。在 QML 中，通過指定版本號來確保使用特定的 API 版本。如果不指定版本號，默認(rèn)會使用安裝的最新版本。
• 版本兼容性：QML 支持兼容多個版本的庫，因此可以同時提供新版本和舊版本的兼容支持。例如，可以導(dǎo)入 6.0 版本的庫，但如果項(xiàng)目需要兼容較低版本，則可以同時提供多個版本的實(shí)現(xiàn)。

解決命名沖突

當(dāng)導(dǎo)入多個庫時，有可能會遇到命名沖突的問題，比如多個庫中都存在同名組件。為了解決這種問題，可以使用 as 關(guān)鍵字為導(dǎo)入的庫指定一個別名，這樣就可以通過別名來訪問庫中的組件。

例如，以下代碼導(dǎo)入了 QtQuick.Controls 并為其指定了別名 CON：

import QtQuick.Controls 6.0 as CONRectangle {width: 400height: 400// 使用帶有命名空間的 Button 組件CON.Button {text: "This is a button from QtQuick.Controls"anchors.centerIn: parent}
}

通過這種方式，即使導(dǎo)入了多個庫中存在同名的 Button，也可以通過別名來區(qū)分不同的庫。

導(dǎo)入目錄中的代碼

在實(shí)際項(xiàng)目開發(fā)中，我們可能會將多個相關(guān)的 QML 文件放入一個目錄中，這些文件可以被當(dāng)作一個整體導(dǎo)入到主項(xiàng)目中。這樣可以減少逐個導(dǎo)入的麻煩，并提高代碼組織的清晰度。

• 步驟 1：在項(xiàng)目目錄下創(chuàng)建一個新目錄，例如 MyDir。

• 步驟 2：在 MyDir 目錄中創(chuàng)建多個 QML 文件，例如 Type1.qml 和 Type2.qml。

  Type1.qml:

  import QtQuick 2.0Text {text: "This is Type 1"
  }
  

  Type2.qml:

  import QtQuick 2.0Text {text: "This is Type 2"
  }
  

• 步驟 3：在主文件中導(dǎo)入整個目錄。

  import "MyDir"Rectangle {width: 400height: 400// 使用目錄中定義的類型Type1 {anchors.top: parent.topanchors.horizontalCenter: parent.horizontalCenter}Type2 {anchors.bottom: parent.bottomanchors.horizontalCenter: parent.horizontalCenter}
  }
  

通過導(dǎo)入整個目錄，可以使用該目錄中的所有 QML 類型，而不需要逐個導(dǎo)入每個文件。