全面認識 Qt Widgets、QML、Qt Quick

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

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

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

1

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

從概念上區(qū)分

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

這里，主要涉及兩點：

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

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

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

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

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

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

從模塊上區(qū)分

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

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

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

總之，GUI 模塊是 Qt Quick，QML 是標記語言，它包含一個 JavaScript 運行時來執(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 來繪制場景；
  QtQuick 2.x 基于 Scene Graph，一個 OpenGL（ES）2.0 抽象層，對繪圖進行了高度優(yōu)化，效率更高。

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

• 從 Qt 5.5 開始，加入了一個新模塊 QtQuick3D，它提供使用 QML 語言創(chuàng)建 3D 應(yīng)用程序/游戲的能力，其使用的是一個被命名為 FrameGraph 的新引擎，而非 Scene Graph（因為太 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)天下（桌面＋移動端），夢想還是要有的，萬一實現(xiàn)了呢？

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

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

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

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

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

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

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

• UI 與邏輯分離

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

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

4

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

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

• 語言編碼

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

Qt Quick 主要使用 QML 和 JavaScript。

• 性能差異

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

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

• UI 設(shè)計

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

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

5

Qt Widgets 和 Qt Quick 該如何選擇？

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

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

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

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

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

6

給新手的建議

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

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

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

·END·
?

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

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

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