[QML]從零開始QML開發(fā)（一）什么是QML，為什么學(xué)習(xí)QML，先寫一個(gè)簡單的頁面QML開發(fā)和QWidget開發(fā)的區(qū)別

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

下面是QML和Qt Widgets之間的一些優(yōu)缺點(diǎn)以及為何Qt公司大力推行QML開發(fā)的原因：

優(yōu)點(diǎn)：

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

【資料圖】

缺點(diǎn)：

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

用戶體驗(yàn)：QML提供了現(xiàn)代化、用戶友好的界面設(shè)計(jì)能力，可以創(chuàng)建吸引人且交互性強(qiáng)的用戶界面。多平臺(tái)支持：QML通過跨平臺(tái)的特性，可以將開發(fā)的應(yīng)用程序輕松地移植到不同的操作系統(tǒng)和設(shè)備上，提高了開發(fā)效率和代碼的重用性。易用性和開發(fā)效率：QML的可視化設(shè)計(jì)和聲明性語法使得開發(fā)者可以更快速地構(gòu)建和迭代界面，減少了開發(fā)周期。

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

另外值得一提的點(diǎn)，QML作為一種幾乎是描述性語言的存在，其跨平臺(tái)的支持理論上應(yīng)該顯著好于QWidget的，所以新項(xiàng)目的開發(fā)（大概率是要兼容多系統(tǒng)）盡量在QML的基礎(chǔ)上開發(fā)吧！

這就又相當(dāng)于是我學(xué)了一門新的語言了，但既然已經(jīng)有了QWidget的開發(fā)經(jīng)驗(yàn)，再去開發(fā)前端html頁面想必難度也不會(huì)大到哪里去，那么就來看看效果吧

開發(fā)準(zhǔn)備

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

為什么不用Qt 6 ?因?yàn)槲疫@臺(tái)開發(fā)電腦上沒有裝Qt 6 ，不過具體使用起來大差不差。

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

這也是為什么我們說QML比較適合新項(xiàng)目----因?yàn)槟阋膊荒鼙ＷC以前的老項(xiàng)目的代碼文件是以UTF8 with BOM格式保存的，也不可能把以前的老代碼全部轉(zhuǎn)換成UTF8 with BOM，這個(gè)是比較需要注意的。

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

具體方法就是：擴(kuò)展--》管理擴(kuò)展--》聯(lián)機(jī)--》搜索并下載Format on Save for VS2022--》下載完成--》VS上方菜單欄點(diǎn)擊工具--》選項(xiàng)--》Format On Save -->UTF8-->Enable ForceUtf8WithBom 改為True

OK，讓我們開啟我們的第一個(gè)項(xiàng)目，怎么創(chuàng)建的就不說了，反正就是你在創(chuàng)建項(xiàng)目的時(shí)候直接創(chuàng)建一個(gè)QtQuick項(xiàng)目就可以了，我們來直接看項(xiàng)目內(nèi)部：

先來看main函數(shù)，這個(gè)

QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

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

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

在這段代碼中，使用QQmlApplicationEngine來加載和運(yùn)行一個(gè)QML界面。

首先，創(chuàng)建了一個(gè)QQmlApplicationEngine對象，該對象用于加載和管理QML應(yīng)用程序。

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

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

如果加載的QML界面成功，程序繼續(xù)執(zhí)行后續(xù)的邏輯。否則，返回-1，可能表示加載失敗或發(fā)生錯(cuò)誤。

簡而言之，這段代碼的作用是加載并檢查一個(gè)QML界面是否成功加載，如果加載成功，則繼續(xù)執(zhí)行其他相關(guān)操作。

然后我們雙擊一下這個(gè)main.qml文件，進(jìn)來看看，內(nèi)容大概如下：

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

沒錯(cuò)，就這么簡單，就是幾句話就表示了一個(gè)窗口，沒有那么多規(guī)定復(fù)雜的構(gòu)造函數(shù)，信號(hào)，Q_OBJECT宏之類的，而是一個(gè)由Qt完全封裝好了的QML文件

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

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

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

再編譯執(zhí)行一下：

然后按一下這個(gè)按鈕就會(huì)彈出對應(yīng)的提示。onClick是點(diǎn)擊函數(shù)，至于這個(gè)函數(shù)是什么意思，將會(huì)在之后的文章中著重講一下，這里不講信號(hào)槽這些概念。

預(yù)覽

寫到這里，不禁讓我頭皮發(fā)麻，因?yàn)檫@里有一個(gè)非常嚴(yán)重的問題就是：我怎么知道現(xiàn)在界面是什么情況的?之前有一幫B開發(fā)就是用純代碼寫QWidget，而且不能預(yù)覽，調(diào)試起來真的麻煩的我想殺人。

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

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

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

之后簡單說一下關(guān)于QML控件、信號(hào)、槽、錨、屬性相關(guān)的內(nèi)容

調(diào)試

當(dāng)然了，你肯定會(huì)好奇這種代碼怎么調(diào)試，你會(huì)好奇地在qml字段上打上一個(gè)斷點(diǎn)然后嘗試調(diào)試，結(jié)果你發(fā)現(xiàn)行不通。

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

關(guān)鍵詞：