網易 Duilib：功能全面的開源桌面 UI 開發框架

有道技術團隊發表於2020-12-28
UI框架

網易 Duilib 框架概述

Duilib 是 Windows 系統下的開源的 DirectUI 介面庫（遵循 BSD 協議），完全免費，可用於商業軟體開發。

Duilib 可以簡單方便地實現大多數介面需求，包括換膚、換色、透明等功能，支援多種圖片格式，使用 XML 可以方便地定製視窗，能較好地做到 UI 和邏輯相分離，儘量減少在程式碼裡建立 UI 控制元件。目前，Duilib 已經在國內有較為廣泛的使用。

網易在研發網易易信 PC 版時引入 Duilib，經過多年開發和改進，由網易雲信在2019年4月開源。（github 地址：https://github.com/netease-im...）

網易 Duilib 使用 C++11 重寫，在其原有基礎上做了較大重構，搭配谷歌的基礎元件 Base 庫、基於 Chromium 的 WebView 框架 CEF 以及常用的 UI 元件，形成了一套功能強大、簡單易用的完整桌面 UI 開發框架。

網易 Duilib 整體框架

整體元件架構

元件架構圖
框架中提供了多執行緒模型、高精度定時器、基本的 xml 解析、zip 解壓等功能；封裝了一層渲染介面和全域性樣式資源的統一管理；並且對 DPI 適配、多語言、虛擬鍵盤、手寫板等功能增加了支援；在上層提供了豐富的控制元件。

執行緒模型和訊息佇列

開發框架中整合了 Chromium 中 base 庫的執行緒模型和訊息佇列，base 中包含了多種訊息迴圈、非同步操作介面。
base 執行緒訊息迴圈
網易 Duilib 框架中的 UI 訊息迴圈、工作執行緒都完全依託 base 的執行緒模型。使用 base 的非同步通訊能力，我們可以將耗時的工作（如資源解析）放到輔助執行緒來減輕 UI 執行緒的壓力。
base 非同步通訊
同時，網易 Duilib 中的各種基礎元件，都已經繼承了 base 中的生命週期檢測能力，每個任務在執行時都會先檢查與之繫結的物件是否存活，確保多執行緒操作不會因野指標而導致崩潰。實際專案開發中，使用base的執行緒模型，我們可以非常簡單做到 UI 執行緒、資料庫執行緒、網路執行緒、其他工作執行緒之間的通訊與互動，有效提升開發速度。

網易 Duilib 的功能特點

更加豐富的功能

網易 Duilib 框架提供了更加完整和豐富的功能，以滿足不同真實業務場景的需求：

  • 豐富的控制元件、簡易的佈局
  • 靈活的控制元件組合、事件處理方式
  • 模組化支援
  • 優化渲染效率
  • 異形窗體支援
  • DPI 適配支援
  • 多國語言支援
  • 通用樣式支援
  • 虛表控制元件支援
  • 虛擬鍵盤支援
  • 實用的多執行緒支援
  • CEF webview 支援
  • 控制元件動畫、GIF 動畫支援
  • 觸控裝置支援（Surface、Wacom）
  • 抽象渲染介面（為其他渲染引擎提供支援）

靈活的佈局與組合

網易 Duilib 中，增加了控制元件與容器的尺寸自適應功能，免去繁瑣的手寫尺寸。同時增強了佈局能力，搭配控制元件的一些定位屬性，可以使用少量 xml 程式碼來完成更加強大的佈局效果。
新增的絕對佈局
​現在的 UI 庫中，把佈局、容器、控制元件等邏輯元件拆分開，讓不同的佈局可以與任意容器進行靈活的元件。並且弱化了容器與控制元件的區別，基礎控制元件使用模版來編寫，上層使用時可以讓它繼承不同的控制元件或模版，讓控制元件本身也可以是容器：

typedef LabelTemplate<Control> Label; 
typedef LabelTemplate<Box> LabelBox; 
typedef ButtonTemplate<Control> Button; 
typedef ButtonTemplate<Box> ButtonBox; 
typedef CheckBoxTemplate<Control> CheckBox; 
typedef CheckBoxTemplate<Box> CheckBoxBox;

基礎控制元件繼承了容器後，就可以擁有控制元件本身的行為+容器的組合能力。這樣做的優點是如果一個基礎元件在 UI 上無法滿足需求，那麼就讓他成為容器去任意組合其他的 UI 元件，提升控制元件的表現能力。同時控制元件支援在 xml 中編寫簡單的事件處理邏輯，把一些功能簡單的UI控制邏輯放在 xml 中。

功能強大的 web 展現元件：CEF WebView

CEF（Chromium Embedded Framework）是基於谷歌 Chromium 瀏覽器核心封裝出的跨平臺 web browser 元件。

CEF 內部有完整的一套訊息迴圈，我們將網易 Duilib 框架中的 base 執行緒模型與 CEF 訊息迴圈組合在一起。同時封裝CEF的離屏渲染模式（OSR）、視窗模式為網易 Duilib 中的控制元件 CefControl、CefNativeControl，讓 CEF 的 WebView 能力完整的嵌入到網易 Duilib 中。最後我們封裝了js與native的通訊能力 JsBridge。
CEF執行流程
如此，我們可以使用 CefControl、CefNativeControl 來做單純的 web 展示控制元件，也可以以 WebView 為核心，網易 Duilib 為輔助，開發 web app。UI 層的展現都由 web 頁面負責，底層的核心邏輯、資料庫、網路等由 C++ 負責，web 與 C++ 使用 JsBridge 通訊。

應用例項：有道精品課

有道精品課是網易旗下線上教育平臺，教師通過線上直播的方式對學生授課，需要一個支援直播、聊天、課件分享、手寫板、web、答題互動等功能的客戶端讓老師使用，因此有道精品課教師端應運而生。

老師可以使用有道精品課教師端進行 PPT、PDF、桌面共享、iPad 投屏、視訊播放等多種直播方式 。老師也可以把講課過程中畫板上的板書和課件匯出為 PDF 分享給學生。
有道精品課教師端
我們需要讓教師端滿足各種直播需求的同時，保證開發的速度、易用性、擴充套件性。另外，由於音視訊、聊天等功能需要消耗大量 CPU 資源，這就要求客戶端的 UI 本身只能佔用較低的記憶體和 CPU 資源。基於以上需求，我們使用網易 Duilib 框架進行了有道精品課教師端的開發。

教師端的畫板擁有豐富的功能：繪製各種圖形圖片、圖形互動、書寫文字、PPT解析、動畫、匯出 PDF、縮放等等。

畫板支援的特性越複雜，就越需要消耗更多的 CPU。為了節省 CPU 資源，我們搭配網易 Duilib 框架中的渲染引擎，設計了6層快取機制，讓畫板在支援豐富功能的同時保證極低的 CPU 佔用率。
畫板的多層快取方案
依託於網易 Duilib 框架的 UI 元件和渲染能力，教師端畫板可以支援手寫板筆跡、毛筆，支援繪製各種圖形圖片，支援畫板縮放。
毛筆
圖形圖畫

由於老師的課件大多為 PPT 編寫，為了讓老師授課更加方便，教師端支援匯入 PPT。並且使用網易 Duilib 框架的動畫能力，來支援展現 PPT 元素的動畫，讓老師方便播放動畫或控制 PPT 元素。
支援PPT動畫
​配合網易 Duilib 框架的 WebView 能力，可以把 web 頁面融入到畫板裡，既可以操作網頁也可以寫書板書，極大增強畫板表現力。使用這樣的能力，我們可以讓教師端支援展現數學互動題、物理實驗、化學實驗等等內容。
畫板內嵌web

不斷優化迭代，與開發者同行

目前，我們已經將網易 Duilib 開源，github 地址：
https://github.com/netease-im...

歡迎大家使用並與網易 Duilib 同行。

計劃在不久之後，我們將支援向量圖來增強 DPI 適配能力，增加更加豐富的動畫（幀動畫、屬性動畫、路徑動畫、特效動畫）來提升 UI 庫的表現力，並替換效能更好的 skia 渲染引擎。

未來，我們將持續迭代優化網易 Duilib 框架，不斷的擴充套件它的功能。在 github 社群裡，已經有很多的開發者參與到專案的迭代中。

歡迎更多開發者朋友的加入。

特別鳴謝：感謝自網易 Duilib 成立以來，為之貢獻過以及仍在貢獻程式碼的小夥伴們，包括但不限於 陽光、redrain、harrison 等。

撰文/ Redrain
編輯/ Ryan
來源/ 有道技術團隊（ID: youdaotech）

相關文章