LCUI 1.0 Beta 發布

02-13

在 Hacker News 投遞的鏈接無人問津，只有 3 點分數，然而今天早上發現居然上榜了，投遞者並不是我，嘛，截圖留個紀念。

Hacker News 截圖紀念

新特性

font: 添加支持按字重（font-weight）和風格（font-style）選擇字體
textlayer: 添加 [bgcolor] 標籤支持，用於設置文本背景色 (#110)
textlayer: 添加 [i] 標籤支持，用於設置文本為斜體 (#115)
textlayer: 添加 [b] 標籤支持，用於設置文本為粗體 (#112)
textlayer: 使用 FreeType 字體引擎默認的方式獲取空格寬度
widget: 為 textview 添加內容修剪支持，啟用後會去除文本首尾空白符 (#97)
widget: 添加錨點（anchor）組件 (#105)
widget: 為 textview 添加 word-break 屬性支持，用於設置單詞斷行方式 (#71)
widget: 添加 WTT_RESIZE_WITH_SURFACE 任務類型，用於將表面（surface）大小與部件同步 (#104)
widget: 添加 Widget_UnbindEventByHandlerId() 函數，用於根據事件處理器標識號取消事件綁定
css: 添加 font-face 規則解析器，可用於在 css 代碼中定義字體信息 (#95)
css: 為 url() 的解析器添加支持處理相對路徑 (#98)
css: 添加針對 justify-content 的屬性解析器 (#117)
css: 為 border 的屬性解析器添加支持解析 "border: 0"
css: 為 line-height 的屬性解析器添加支持解析 "line-height: 1"
layout: 添加簡單的 flex 顯示方式和 justify-content 屬性支持 (#117)
bulder: 為 <widget> 添加短名稱 <w> (#103)
core: 添加 LCUIWorker 用於處理非同步任務 (#106)

問題修復

textlayer: 文本沒有垂直居中對齊 (#100)
widget: textview 的高度計算錯誤 (#111)
css: 樣式表選取問題，同名選擇器會共用同一優先順序 (#113)
graphic: Graph_FillRectARGB() 段錯誤 (#110)
linux: 設置 "--enable-video-ouput=no" 選項後會導致鏈接器報錯
renderer: 部件位置為非整數時，在渲染時邊框會時有時無 (#108)

改進

layout: 改進部件尺寸計算
layout: 改進塊（block）和內聯塊（inline-block）元素的布局處理
font: 改進字體數據的存儲和操作方式
mainloop: 設置每幀運行任務隊列中的所有任務
mainloop: 設置每幀至少更新一次部件樹

如需了解更多代碼變更細節，請查看此次拉取請求。當前版本還存在已知且未修復的問題，你可以在問題列表裡找到它們。

布局

居中和靠右是比較常用的對齊方式，比如對話框中的按鈕組：

模態框

之前版本中如果要實現這種效果，需要修改定位方式和右間距：position: absolute; right: 0;，一個按鈕還好，多個按鈕就得靠包裝一個容器來定位，而且父級元素的寬高不會被撐開，始終為 0。為此，添加了簡單的彈性（flex）布局支持，配合 justify-content 屬性可以設置子級元素的對齊方式。justify-content 屬性值有三種：flex-start、center 和 flex-end，效果是將每一行元素向左對齊、居中對齊、向右對齊。

Flex 布局效果

字體

之前的版本只能根據字族（font-family）名稱選擇一種字體，即使這個字族包含不同粗細程度、風格的字體也只會選擇常規（Regular）字體，連給界面中的標題加粗都很麻煩。為此，改進了字體數據的存儲和操作方式，添加支持按字重（font-weight）和風格（font-style）選擇字體，CSS 解析器也添加了相關的解析支持。

由於大多數字體都不會包含所有粗細程度和風格的字形，所以會存在找不到的情況，而本次更新的版本只是改進了存儲和訪問方式，並未實現字形自動加粗和傾斜功能，為解決這個問題就添加了一個回退機制，回退機制的設計參考自 MDN 文檔，如需了解具體規則可查看此文檔內容。

文本渲染

既然字體已經支持使用粗體和斜體，那麼文本層（TextLayer）也就順勢加上了 [i] 和 [b] 標籤的支持，方便測試字體效果。有了 color、i、b 這幾個標籤，界面中的代碼塊也就能加點特效：

代碼渲染效果

考慮到文本中會引用命令行和代碼，為了凸顯這些文本，需要能夠設置背景色，於是就添加了 [bgcolor]標籤支持，比如內容為 [bgcolor=#ddeeff]make install[bgcolor] 的文本，渲染效果會是這樣：

對於英文文本，如果在換行時直接截斷單詞則會影響閱讀體驗，需要將溢出的單詞整個換到下一行顯示，控制這個規則的屬性是 word-break，默認值為 normal，不中斷單詞，當值為 break-all 時會在任意字元間斷行。

單詞斷行模式

CSS

一篇文檔會需要用到各種字體來提升閱讀體驗，比如：等寬字體、中文字體、西文字體，用 LCUI 呈現這樣的文檔的話會有些麻煩，需要手動在 XML 或 C 代碼中引入這些字體文件，而作者在為 LCUI 開發 CSS 組件庫時也遇到同樣的問題，如果能在 CSS 中預先定義好各種字體的信息就能夠省去這些麻煩。

CSS 標準中的 @font-face 規則可以解決這個問題，於是 LCUI 就增加了對 @font-face 規則的解析支持，方便通過 CSS 代碼來控制載入哪些字體。@font-face 能夠定義包括字族、風格、粗細程度、文件路徑等在內的字體信息，然而這些屬性中只有文件路徑有用，在解析完規則後會直接載入該文件路徑里的字體文件，因為 LCUI 的字體管理還不支持預先聲明字體信息和按需載入字體文件這兩個功能。

部件

添加了錨點（Anchor）部件，功能與 HTML 中的 <a> 元素類似，支持 href、target、key 屬性，當該部件被點擊後會判斷 href 內容，如果是 https://、http:// 或 file: 類型的鏈接，則調用系統默認的打開方式打開它；如果是普通的文件路徑則會將之視為 xml 文件載入它，載入成功後會將新元素追加至 target 指定的 id 的元素內。簡而言之，可以靠該部件實現「點擊按鈕切換界面」的功能。

錨點部件功能展示

版本迭代

代碼庫的 Git 提交信息格式已經採用 Angular 提交信息規範進行規範，方便為以後的版本收集改動內容。

版本號一直停留在 1.0.0 會浪費版本號的價值，但到目前為止，LCUI 內部函數命名還不夠穩定，在後續版本更新中有可能會更名和移除，如果你有豐富的介面命名和模塊化設計經驗，可以向 LCUI 提交你的改進方案，以讓 LCUI 儘早發布 1.0.0 版本。