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

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

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

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

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

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

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

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

訪問同一目錄下的文件

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

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

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

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

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

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

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

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

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

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

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

驗證結(jié)果

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

訪問外部文件

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

import 語法

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

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

例如，以下代碼導入了 QtQuick 庫的 6.0 版本：

import QtQuick 6.0

庫的名稱與版本號

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

解決命名沖突

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

例如，以下代碼導入了 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}
}

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

導入目錄中的代碼

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

• 步驟 1：在項目目錄下創(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：在主文件中導入整個目錄。

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

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