[QML]從零開始QML開發（一）什么是QML，為什么學習QML，先寫一個簡單的頁面QML開發和QWidget開發的區別

QML（Qt Meta-Object Language）是Qt提供的一種聲明性語言，用于快速創建用戶界面。相對而言，Qt Widgets是基于C++的桌面應用程序開發框架。

下面是QML和Qt Widgets之間的一些優缺點以及為何Qt公司大力推行QML開發的原因：

優點：

可視化設計：QML是一種基于標記的語言，使用了層疊樣式表（CSS）類似的語法，使得界面設計變得直觀輕松?？缙脚_支持：QML與其他主流操作系統和設備無關，可以在多個平臺上運行，包括桌面、移動和嵌入式設備?？焖俚篞ML具有熱重載功能，可以實時編輯和查看界面的更改，加快了開發和調試的速度。良好的動畫和效果支持：QML通過內置的動畫和效果組件，使得界面的交互和動態效果實現變得簡單。靈活和可維護性：QML允許將界面元素分解為可重用的組件，使得代碼結構化，易于拓展和維護。

【資料圖】

缺點：

學習曲線：QML需要學習新的語法和概念，相對于傳統的C++開發，可能需要一些時間來適應和掌握。性能：與原生C++應用程序相比，QML在某些情況下可能會有性能上的損失，尤其是在復雜界面或需要大量渲染的場景中。Qt公司推行QML開發的原因：

用戶體驗：QML提供了現代化、用戶友好的界面設計能力，可以創建吸引人且交互性強的用戶界面。多平臺支持：QML通過跨平臺的特性，可以將開發的應用程序輕松地移植到不同的操作系統和設備上，提高了開發效率和代碼的重用性。易用性和開發效率：QML的可視化設計和聲明性語法使得開發者可以更快速地構建和迭代界面，減少了開發周期。

這也是一種真正在Qt上進行前后端分離的方案，這倒是挺新穎的。個人在簡單體驗了一下QML開發之后，感覺QML是一個很類似前端CSS的技術，把頁面變成一個單獨的模塊，也算是一種完美貫徹MVC模式的工具吧（畢竟之前還是會有很多人把業務放到界面里面去寫，而且也會被人瘋狂亂噴）某種意義上來說，這也是一種真正在Qt上進行前后端分離的方案，這倒是挺新穎的。

另外值得一提的點，QML作為一種幾乎是描述性語言的存在，其跨平臺的支持理論上應該顯著好于QWidget的，所以新項目的開發（大概率是要兼容多系統）盡量在QML的基礎上開發吧！

這就又相當于是我學了一門新的語言了，但既然已經有了QWidget的開發經驗，再去開發前端html頁面想必難度也不會大到哪里去，那么就來看看效果吧

開發準備

作為一名高貴的windows開發，那自然是要使用宇宙第一IDE:Visual Studio 2022 + Qt 5.14.2

為什么不用Qt 6 ?因為我這臺開發電腦上沒有裝Qt 6 ，不過具體使用起來大差不差。

然后比較重要的一點是，QML本身可能對中文的支持有點問題，也就是說QML中如果出現了中文，可能就會出現亂碼。當然了不止QML中會出現亂碼，在QWidget中也會出現亂碼，不同的是可以在QWidget中使用#pragma characterset("utf8")解決，但是在QML文件中不允許這樣的語法出現（實際上QML是一套自己的語法），所以只能通過保存文件為UTF-8 with BOM的方式來規避掉這種可能出現的問題。

這也是為什么我們說QML比較適合新項目----因為你也不能保證以前的老項目的代碼文件是以UTF8 with BOM格式保存的，也不可能把以前的老代碼全部轉換成UTF8 with BOM，這個是比較需要注意的。

至于說怎么轉，網上教程一大堆，我只說我的做法 ： 下載插件 Format on Save for VS2022(當然了每個vs版本肯定都會有的)

具體方法就是：擴展--》管理擴展--》聯機--》搜索并下載Format on Save for VS2022--》下載完成--》VS上方菜單欄點擊工具--》選項--》Format On Save -->UTF8-->Enable ForceUtf8WithBom 改為True

OK，讓我們開啟我們的第一個項目，怎么創建的就不說了，反正就是你在創建項目的時候直接創建一個QtQuick項目就可以了，我們來直接看項目內部：

先來看main函數，這個

QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

先不管，這一段是給整個程序設置了一個支持高DPI的模式，這個無所謂

QQmlApplicationEngine engine;engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return -1;

在這段代碼中，使用QQmlApplicationEngine來加載和運行一個QML界面。

首先，創建了一個QQmlApplicationEngine對象，該對象用于加載和管理QML應用程序。

然后，使用engine.load(QUrl(QStringLiteral("qrc:/main.qml")))語句加載名為"main.qml"的QML文件。在這里，使用QUrl::fromLocalFile()函數將文件路徑轉換為QUrl格式，"qrc:"表示該文件位于Qt資源（qrc）中。

接下來，通過engine.rootObjects().isEmpty()判斷加載的QML界面是否成功。engine.rootObjects()返回根對象的列表，如果列表為空，則表示加載失敗。

如果加載的QML界面成功，程序繼續執行后續的邏輯。否則，返回-1，可能表示加載失敗或發生錯誤。

簡而言之，這段代碼的作用是加載并檢查一個QML界面是否成功加載，如果加載成功，則繼續執行其他相關操作。

然后我們雙擊一下這個main.qml文件，進來看看，內容大概如下：

import QtQuick 2.12import QtQuick.Window 2.12import QtQuick.Controls 2.5Window {visible: truewidth: 640height: 480title: qsTr("Hello World")}

沒錯，就這么簡單，就是幾句話就表示了一個窗口，沒有那么多規定復雜的構造函數，信號，Q_OBJECT宏之類的，而是一個由Qt完全封裝好了的QML文件

讓我們來編譯執行一下，大概效果就是生成了一個窗口：

讓我們來寫一個按鈕，添加代碼如下：

import QtQuick 2.12import QtQuick.Window 2.12import QtQuick.Controls 2.5Window {visible: truewidth: 640height: 480title: qsTr("Hello World") Button{x:100  //設置按鈕的橫坐標y:100  //設置縱坐標text:"我是按鈕"   //按鈕標題//一個類似JS風格的函數function slotAnyway(){console.log("slotAnyway")}//信號槽連接onClicked: {slotAnyway()console.log("點擊")}}}

再編譯執行一下：

然后按一下這個按鈕就會彈出對應的提示。onClick是點擊函數，至于這個函數是什么意思，將會在之后的文章中著重講一下，這里不講信號槽這些概念。

預覽

寫到這里，不禁讓我頭皮發麻，因為這里有一個非常嚴重的問題就是：我怎么知道現在界面是什么情況的?之前有一幫B開發就是用純代碼寫QWidget，而且不能預覽，調試起來真的麻煩的我想殺人。

當然了，Qt肯定也想到了這個問題，不然他們也不會一開始就提供.ui給用戶去編輯了，相對的，Qt也肯定提供了一套QML的預覽工具以供開發者調用，這個工具就是 ：qmlscene.exe，這個工具的位置在你的Qt安裝目錄的指定版本下的bin目錄，比如D:\DevTools\Qt_5.14.2\5.14.2\msvc2017_64\bin\qmlscene.exe

怎么用呢？其實也簡單，就是直接雙擊qmlscene.exe，然后再選擇指定的.qml文件就行了

當然了，這肯定有點低能，我們也不可能這么做。正確的做法是右鍵main.qml->..打開方式->瀏覽->找到qmlscene.exe，注意不能設置為默認，否則你就不能編輯這個.qml文檔了，只需要每次預覽的時候雙擊一下就可以了

之后簡單說一下關于QML控件、信號、槽、錨、屬性相關的內容

調試

當然了，你肯定會好奇這種代碼怎么調試，你會好奇地在qml字段上打上一個斷點然后嘗試調試，結果你發現行不通。

當然了，Qt也考慮到了這個問題，當你需要調試這個程序的時候，請右鍵項目-》屬性-》Qt Project Settings->QML->Enable QMl Debugging->改為是，這樣之后你在qml文件中打上的斷點就可以被命中了，當然了這也帶來一個問題，就是當你在之后刪掉這個斷點后，每次調試或者啟動這個程序都會告訴你程序命中了斷點但是找不到這個斷點，不過這并不是什么首要的問題，不是嗎？

關鍵詞：