全面認(rèn)識(shí) Qt Widgets、QML、Qt Quick

ic.com/weixin/tr/2021-07/19/023ksnyr532.gif">

Qt Widgets、QML、Qt Quick ...?呃 (⊙﹏⊙) ，簡(jiǎn)直了，傻傻分不清楚?！

哈哈，沒關(guān)系，來全面認(rèn)識(shí)一下，也許還有一些你不知道的秘密哦！

1

QML 和 Qt Quick 是什么關(guān)系？

從概念上區(qū)分

QML 是一種用戶界面規(guī)范和標(biāo)記語言，它允許開發(fā)/設(shè)計(jì)人員創(chuàng)建高性能、流暢的動(dòng)畫和具有視覺吸引力的應(yīng)用程序。

這里，主要涉及兩點(diǎn)：

1. 用戶界面規(guī)范：QML 提供了一種高度可讀的、聲明式的、類似 JSON 的語法，支持命令式 JavaScript 表達(dá)式和動(dòng)態(tài)屬性綁定。

2. 標(biāo)記語言：像 C 一樣，QML 也是一種語言，它的文件以 .qml 結(jié)尾。

Qt Quick 是 QML 類型和功能的標(biāo)準(zhǔn)庫，它包括視覺類型、交互類型、動(dòng)畫、模型和視圖、粒子效果和著色效果（可以使用 import 語句訪問所有這些功能）。

Qt Quick 使用 QML 作為聲明語言，來設(shè)計(jì)以用戶界面為中心的應(yīng)用程序。嚴(yán)格來講，Qt Quick 是一個(gè)用于 QML 的工具包，允許以 QML 語言來開發(fā)圖形界面。當(dāng)然，還有其他的工具包用于 QML：

• 圖形化的（例如：Sailfish Silica 或 BlackBerry Cascades）

• 非圖形的（例如：QBS - QMake/CMake/make ... 的一個(gè)替代品）

從模塊上區(qū)分

QML 由 Qt QML 模塊提供，QtQuick QML 庫由 Qt Quick 模塊提供。

• Qt QML 模塊：為 QML 應(yīng)用程序提供了語言和引擎基礎(chǔ)結(jié)構(gòu)。

• Qt Quick 模塊：提供了許多可視化組件、模型視圖支持、動(dòng)畫框架以及用于構(gòu)建用戶界面的更多功能。

總之，GUI 模塊是 Qt Quick，QML 是標(biāo)記語言，它包含一個(gè) JavaScript 運(yùn)行時(shí)來執(zhí)行 JavaScript，還可以將 QML/JavaScript 代碼與 C 代碼集成在一起。

2

QtQuick 1.x 和 QtQuick 2.x 有什么差異？

QtQuick 主要包含 1.x 和 2.x，它們之間的主要區(qū)別是：

• 全新的 Qt 版本
  QtQuick 1.x 基于 Qt 4.x；
  QtQuick 2.x 隨 Qt 5.0 一起引入。

• 全新的繪圖系統(tǒng)
  QtQuick 1.x 使用 QGhicsView/QPainter API 來繪制場(chǎng)景；
  QtQuick 2.x 基于 Scene Graph，一個(gè) OpenGL（ES）2.0 抽象層，對(duì)繪圖進(jìn)行了高度優(yōu)化，效率更高。

• 全新的 QML 引擎
  Qt 4.x 中，QML 引擎基于JSC（JavaScriptCore - Webkit 的 JS 引擎）；
  Qt 5.0 中引入 V8（Google 的開源高性能 JavaScript 引擎，用 C 編寫，用于 Chromium、Node.js 和多個(gè)其他嵌入應(yīng)用程序）；
  Qt 5.2 中引入了 V4 JS 引擎，針對(duì) QML 用例進(jìn)行了優(yōu)化，并且可以選擇關(guān)閉 JIT（Just-In-Time）編譯，以符合 iOS 和 WinRT 平臺(tái)的限制。個(gè)頭更小、反應(yīng)更快、擴(kuò)展性也非常好。

• 從 Qt 5.5 開始，加入了一個(gè)新模塊 QtQuick3D，它提供使用 QML 語言創(chuàng)建 3D 應(yīng)用程序/游戲的能力，其使用的是一個(gè)被命名為 FrameGraph 的新引擎，而非 Scene Graph（因?yàn)樘?2D/2.4D）。

• 模塊、屬性和方法、類型和 API、C 代碼（QtDeclarative 被移除了，替代的它是 Qt QML 和 Qt Quick 模塊）、QML 插件的更改。

• ......

3

為什么要引入 QML/Qt Quick？

既然有了 Qt Widgets，為什么還要引入 QML/Qt Quick 呢？主要有以下幾方面原因：

• 戰(zhàn)略性發(fā)展

Qt 想用 QML/Qt Quick 一統(tǒng)天下（桌面＋移動(dòng)端），夢(mèng)想還是要有的，萬一實(shí)現(xiàn)了呢？

眾所周知，Qt 為跨平臺(tái)而生，而 QML/Qt Quick 作為 Qt 新生力量，完完全全繼承了 Qt 包羅萬象的特點(diǎn)，它的誕生為 Qt 進(jìn)軍移動(dòng)領(lǐng)域邁出了歷史性的一步。

隨著 Qt 的不斷迭代，QML/Qt Quick 也可用于開發(fā)傳統(tǒng)的桌面程序，而且效率越來越高，這樣以來，便可以用它做任何你想做的事情。

QML/Qt Quick 作為 Qt 的絕對(duì)核心，特別是對(duì)于界面要求較高的開發(fā)者來說，其作用尤為重要。

• 開發(fā)效率的提升

傳統(tǒng)上的 native UI 開發(fā)普遍使用 C 、C#、Objective-C 等語言。但近年來，本地應(yīng)用使用 HTML5 JS 也成為了一種趨勢(shì)。一方面硬件資源越來越豐富，另一方面 Web 技術(shù)讓 JS 的解析速度更快。

除此之外，其中一部分功勞要?dú)w功于 Google，由于其開源強(qiáng)大（niu?bi）的 JS 引擎，Node.js 加上一個(gè)前端框架（例如：Electron - 構(gòu)建跨平臺(tái)的桌面應(yīng)用程序）也可以開發(fā)本地應(yīng)用了。

QML/Qt Quick 和 Node.js 類似，也提供了一系列 JS 和 C 交互的接口，便于 JS 和 C 通信。

• UI 與邏輯分離

盡管大多數(shù)情況下，在編寫應(yīng)用程序時(shí)只需 QML 和 JavaScript，但在有些時(shí)候，需要計(jì)算密集型任務(wù)（例如：復(fù)雜圖像處理、物理引擎），并且需要處理器竭力地提供所有可用的性能。這時(shí)，QML 應(yīng)用開發(fā)適合使用 C 來進(jìn)行擴(kuò)展，以便在后臺(tái)執(zhí)行這些密集型任務(wù)，而界面設(shè)計(jì)和一些簡(jiǎn)單邏輯（例如：按鈕變色、換膚）都可以在 JS 中完成。這樣避免了傳統(tǒng)應(yīng)用開發(fā)前端設(shè)計(jì)和后臺(tái)邏輯混合的情況，讓界面設(shè)計(jì)者專心設(shè)計(jì)界面成為了可能。

由于 QML 是在 Qt 上構(gòu)建的，因此其繼承了 Qt 框架中的大部分功能，尤其是信號(hào)槽機(jī)制以及元對(duì)象系統(tǒng)。使用 C 創(chuàng)建的數(shù)據(jù)可從 QML 直接訪問，而 QML 對(duì)象也可從 C 代碼進(jìn)行訪問。

4

Qt Widgets 和 Qt Quick 有什么區(qū)別？

那么，Qt Widgets 和 Qt Quick 之間都有哪些區(qū)別呢？從以下幾點(diǎn)說起！

• 語言編碼

Qt Widgets 主要使用 C 代碼（PyQt 和 PySide - Qt 的 Python 綁定，使用的是 Python）。

Qt Quick 主要使用 QML 和 JavaScript。

• 性能差異

與 Qt Quick 相比，Qt Widgets 更底層一些。但從長(zhǎng)遠(yuǎn)角度來看，Qt Widgets 性能更好、運(yùn)行得更快。當(dāng)然，處于底層是有好處的，這可以讓 Qt Widgets 更多地暴露于 native API （QtCore 模塊、Qt Style Sheets 等）。也就是說，它常用于桌面開發(fā)。

Qt Quick 更適合移動(dòng)開發(fā)（盡管可用于桌面開發(fā)），它有隨時(shí)可用的彈出窗口、動(dòng)畫、滑動(dòng)、抽屜和常用控件，在移動(dòng)開發(fā)中無處不在。

• UI 設(shè)計(jì)

它們都可以與 Qt Designer 一起工作，并生成相應(yīng)的 ui 文件（在 Qt Widgets 中，文件后綴是 .ui；而在 Qt Quick 中，文件后綴是 .ui.qml），為設(shè)置布局和創(chuàng)建接口提供了一個(gè)高級(jí)視圖。

ui 文件不是強(qiáng)制性的，也不是必需的，可以選擇使用 C /Python ?或 QML/JS 以編程方式進(jìn)行設(shè)計(jì)和布局。

5

Qt Widgets 和 Qt Quick 該如何選擇？

在 Qt 4.7 發(fā)布時(shí)，引入了 QML，用于移動(dòng)開發(fā)，其全面支持觸摸操作、流暢的動(dòng)畫效果等。但在 Qt 5 中，QML 已經(jīng)不再局限于移動(dòng)開發(fā)，也可用于開發(fā)傳統(tǒng)的桌面程序。

很長(zhǎng)時(shí)間里，我都在使用 Qt Widgets。當(dāng)?shù)谝淮螄L試 QML 時(shí)，發(fā)現(xiàn)它太原始。但隨著 Qt 5 的持續(xù)更新，它已經(jīng)得到了很大的改善（更多的功能、更好的性能、以及更多的平臺(tái)支持）。話雖如此，但 Qt Quick 仍在發(fā)展，隨著版本的更新，也會(huì)變得越來越成熟。

相比之下，Qt Widgets 更老、更成熟，而 QML/Qt Quick 則更新、更現(xiàn)代。但無論如何，Qt Widgets 和 Qt Quick 都可以在多個(gè)平臺(tái)上（Windows、Linux、OS X）使用。

對(duì)于傳統(tǒng)的桌面程序來說，應(yīng)優(yōu)先考慮使用 Qt Widgets，若要開發(fā)更現(xiàn)代的 UI 與高級(jí)應(yīng)用，建議使用 Qt Quick。

對(duì)于移動(dòng)端開發(fā)來說，建議使用 Qt Quick，協(xié)同 JavaScript，簡(jiǎn)單快捷、渲染效果更佳、界面更炫酷。不建議使用 Qt Widgets，其顯示效果、適應(yīng)性都不好。

6

給新手的建議

如果你對(duì)編程完全陌生，建議先從 Qt Quick 學(xué)起。就個(gè)人而言，我認(rèn)為 Qt Quick 有一個(gè)更溫和的學(xué)習(xí)曲線，更容易用它來快速完成項(xiàng)目。想想看，能被稱為 Quick 一定是有原因的（不過，也不要小看 Qt Widgets，它也有一些比 Qt Quick 更棒的模塊)。

但是，如果你以前使用過 C 或 Python，建議先看看 Qt Widgets，并熟悉它里面的一些核心機(jī)制（例如：事件、信號(hào)槽），以及必要的模塊（例如：gui、network）。

最后，無論選擇 Qt Widget 還是 Qt Quiget="_blank">ck，都不用太過擔(dān)心上手的問題，因?yàn)?Qt 提供了豐富的示例（當(dāng)然：也別忘了我?）。

·END·
?

高效程序員談天 · 說地 · 侃代碼?· 開車

ic.com/weixin/tr/2021-07/19/508qeryv103.jpg">

長(zhǎng)按識(shí)別二維碼，解鎖更多精彩內(nèi)容