極客們，請收下2021 微軟 x 英特爾黑客松大賽英雄帖！>>>
桌面端的 UI 開發架構對比移動端、Web 端的成熟方案，一直處于不溫不火的狀态。随着疫情掀起的風波，桌面端線上教育、視訊會議等需求不斷湧現。傳統平台下的開發架構難以滿足需求，而類 DirectUI 的架構因跨平台、可拓展性差、門檻高等問題并不能得到一些企業的認可。桌面端 Electron、Flutter 類架構出于性能、原生平台支援等個性化需求考慮，往往得不到最好的解決方案。
Qt Quick 可以較好得解決上述提到的問題。本文将從兩個方面介紹通過 Qt Quick 是如何快速實作桌面端跨平台業務元件建構的，首先我們聊一下 Qt Quick 在桌面端開發的優勢，再詳細如何建立一個 C++ 拓展插件給 Qt Quick 應用來使用。
Qt Quick Plugin 機制可以滿足上面提到的諸多需求。首先 Qt 對跨平台支援非常友好，僅需要對特殊平台做一些簡單适配就可以使用一套代碼可跑在不同終端。官方以“One framework. One codebase. Any platform” 作為标題也突顯了其在跨平台的方面所做的工作。
使用 Qt 編寫的 Qt Quick 元件容易分發，它最終導出可以是源碼形式也可以是釋出的二進制檔案夾，内部包含了對資料模型和 UI 基礎元件的包裝。
使用 Qt Quick 可以很容易的建立一個可複用元件，官方也提供了一些基礎元件如 Google Material 風格的控件等。基于這些基礎元件，我們就可以拓展出不同形式的 UI 元件，在不破壞内部結構的情況下提供外部使用。
Qt Quick 用來描述前端的 QML 語言文法簡練，非常容易了解，可以與 JavaScript 混編，實作幾乎所有我們能想到的能力。并且新版本 Qt Quick 對 C++ 和 QML 互動做了進一步增強，使用簡單的腳本即可實作豐富的能力。
得力于 Qt Quick 的 Model-View-Delegate 設計思想，我們可以對業務資料和 UI 基礎展示能力的封裝完全分離，通過 Model 提供完整的資料鍊條，通過 View 和 Delegate 來對不同場景做資料展示。
通過 Qt Quick Plugin 機制建立一個完整的應用，可以采取類似下圖這種方式：
以音視訊場景舉例，無論上層應用最終最終以什麼形态呈現，底層都是一些固定的資料，比如成員和成員的狀态管理、裝置清單和裝置的檢測選擇，使用者視覺上看到的無非是視訊畫面。通過封裝，我們看到的是這樣一種形式：
類似 MemberList 的設計，不要給其設定固定的視覺樣式，通過全局預定義樣式表來控制可以讓其 UI 跟随使用者的風格變化。在會議場景它可能叫做“與會成員”，在線上教育場景它可能叫做“學生清單”。這樣我們可以随意搭配組成各式類型的業務場景：
一個原生的 Qt Quick 應用允許我們直接基于其能力實作業務功能，像上面提到的場景，當不同産品線需要使用同樣的功能元件或需要拓展 Qt Quick 能力時，我們就可以借助 [Qt Quick 2 Extension Plugin](http://Creating C++ Plugins for QML) 來對這些元件進行封裝了。通過簡單的幾個步驟，我們就可以建立一個屬于自己的 Qt Quick 插件。
首先通過 Qt Creator 建立一個 Qt Quick 2 Extension Plugin 工程。建立好的基礎插件工程中，會預設建立一個派生于 QQmlExtensionPlugin 的子類，用來讓我們注冊自己的自定義子產品提供外部使用：
通過該接口注冊我們的自定義類型提供引入插件的 QML 前端使用：
這些元件有些是前端不可見元件，他們将作為一個前端可執行個體化的對象來建立具體的執行個體，例如 NEMEngine是整個元件的唯一引擎，這些對象要繼承自 QObject。
而資料相關的封裝則不同，他們需要繼承自 QAbstract*Model，以裝置相關的資料模型舉例，以下為示例代碼：
對資料模型的封裝秉持完整、可定制、參數化的原則，盡量不要在元件的封裝過程中摻雜細節的業務需求，以 NeRTC 2.0 SDK 裝置枚舉順序舉例，SDK 提供了兩種枚舉裝置的方式。
一種是 SDK 推薦裝置，當你有内置裝置、外接、藍牙等不同裝置時，SDK 會選擇一個最适合的作為第一個裝置使用。
另外一種是系統預設裝置，跟随系統變更來選擇裝置使用。
兩種方案從某些業務場景角度考慮隻需要一種，但作為一個可以二次開發的元件來說，應該都可以提供上層配置，是以在裝置相關的管理器中，提供了 AutoSelectMode 參數提供外部引入插件的開發者來控制使用哪種模式。
除了對資料模型、自定義類型等進行封裝外，還可以提供一些前端元件讓使用插件的開發者更快捷的建立應用。以視訊渲染的容器舉例，以下是借助 C++ 注冊到前端的 NEMFrameProvider 來實作一個簡單的視訊渲染的 Delegate。
通過工程配置，我們讓其導出插件時同時将這些 .qml UI 檔案也同時導出：
使用一個建立好的插件更為友善，一般插件編譯完成後最終是一個檔案夾的形式分發，我們隻需要在引入的功能中配置我們要引入的插件及路徑即可：
在 QML 中使用時，我們首先需要 import 相應的插件：
這樣你就可以使用插件中注冊進來的類型了：
對裝置清單做展示僅需要建立一個清單，并指定插件注冊進來的裝置資料模型即可。
裝置對象類型建立時我們可以通過預設的參數來指定裝置的選擇方式為 SDK 推薦模式<br />NEMDevices.RECOMMENDED_MODE ：
程式在釋出時，你隻需要将插件目錄與程式同時分發即可，無需多餘的配置即可完成應用的打包釋出流程。
對于 Qt Quick 2 Extension Plugin 的開發和使用，官方提供了非常詳細的文檔。通過這種機制，我們不僅可以建立一個封裝了某底層能力 SDK 完整功能的開發元件，還可以讓使用者高度自定義互動行為。這是以往桌面端 UI 開發架構很難甚至無法做到的事情。
QML 語言的低門檻也可以讓從事過前端、C++ 或一些腳本類語言的開發者迅速切換到 Qt Quick 開發環境。他們不需要關注某個插件的具體實作細節，僅需要将這些元件做一些簡單拼裝就可以組成一個完整的應用。同時這也是網易雲信團隊一直以來努力的方向，我們通過解決方案及易用體系等方式，讓音視訊以及即時通信等技術能夠快速、高效接入相應的服務中。
以上就是本文的全部分享，關于 Qt Quick 更多技術幹貨，也歡迎持續鎖定我們。
鄧佳佳，網易智企雲信進階開發工程師，負責維護網易雲信跨平台 NIM SDK 和上層解決方案預研開發，包括基于 NIM SDK 和 NERTC SDK 建構的線上教育、互動直播、IM 即時通訊、網易會議解決方案的維護，對 Duilib、Qt Quick、CEF 架構有豐富的實戰經驗。