網易 Duilib：功能全面的開源桌面 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 中包含了多種消息循環、異步操做接口。

網易 Duilib 框架中的 UI 消息循環、工做線程都徹底依託 base 的線程模型。使用 base 的異步通訊能力，咱們能夠將耗時的工做（如資源解析）放到輔助線程來減輕 UI 線程的壓力。

同時，網易 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。

如此，咱們可使用 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 元素。

​配合網易 Duilib 框架的 WebView 能力，能夠把 web 頁面融入到畫板裏，既能夠操做網頁也能夠寫書板書，極大加強畫板表現力。使用這樣的能力，咱們可讓教師端支持展示數學互動題、物理實驗、化學實驗等等內容。

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

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

歡迎你們使用並與網易 Duilib 同行。

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

將來，咱們將持續迭代優化網易 Duilib 框架，不斷的擴展它的功能。在 github 社區裏，已經有不少的開發者參與到項目的迭代中。

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

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

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