LCUI下載 - LCUI原始碼下載

LCUI

C#源碼

LCUI 2.2.0

下載

LCUI

用於建立使用者介面的 C 庫

GitHub 操作

介紹

中文版說明文檔

LCUI 是一個用 C 語言編寫的函式庫，用於建立圖形使用者介面。其目標是探索和實踐開發使用者介面的新方法，其特點是體積小、易於使用，並提供方便的開發工具，幫助開發人員快速創建具有圖形使用者介面的桌面應用程式。

LC源自作者名字的首字母。該庫最初是為了幫助作者開發小型專案並獲得開發經驗而設計的。然而，筆者在C/C++專家雲集的就業市場上並沒有獲得競爭優勢，因此只好從事Web前端開發工作。因此，LCUI 現在傾向於整合 Web 前端領域的技術。

主要特點

跨平台：支援Windows和Linux。
完全客製化的組件：組件在多個平台上保持一致的外觀和行為。
內建CSS引擎：支援使用CSS定義使用者介面的樣式和佈局，讓有Web開發經驗的人更容易上手。
提供現代開發工具：這些工具可讓您使用具有 JSX 語法的 TypeScript 語言、React 程式庫和其他 Web 前端技術來編寫使用者介面。

特色概述

您可以透過下面的截圖來了解LCUI應用程式的開發經驗：

類別 React 風格的元件開發：使用 TypeScript 編寫 UI 設定檔。結合 TypeScript、JSX 語法和 LCUI React 程式庫的優勢，您可以簡潔地描述介面結構、資源依賴、元件狀態、資料綁定和事件綁定。
多種樣式表編寫方法： Tailwind CSS、CSS Modules、Sass、全域 CSS。
基於檔案系統的路由器：以目錄的形式組織應用頁面，每個頁面對應一個目錄。目錄的路徑用作該頁面的路由。內建應用程式路由器，無需手動設定路由，即可輕鬆實現頁面切換和導航。
使用者友好且現代的圖標庫：圖標來自 Fluentui-system-icons 庫，並進行了部分自訂以適應 LCUI 的特性，提供類似的使用模式。
命令列開發工具：執行lcui build指令對app目錄下的設定檔進行預處理，產生對應的C原始碼和資源檔。

建築學

隨著時間的推移，LCUI 已經建立在各種庫的基礎上：

lib/yutil：提供通用資料結構和函數的實用程式庫。
lib/pandagl：PandaGL（Panda 圖形庫），提供字體管理、文字佈局、圖像 I/O、圖形處理和渲染功能。
lib/css：CSS 解析器和選擇器引擎，提供 CSS 解析和選擇功能。
lib/ptk：Platform Toolkit函式庫，提供跨平台統一的系統相關API，包括訊息循環、視窗管理、輸入法等。
lib/thread：提供跨平台多執行緒功能的執行緒庫。
lib/timer：定時器庫提供定期執行任務的能力。
lib/ui：UI 核心庫，提供基本的 UI 功能，例如 UI 元件管理、事件佇列、樣式計算和繪圖。
lib/ui-xml：XML 解析函式庫，提供從 XML 檔案內容建立 UI 的能力。
lib/ui-cursor：提供遊標繪圖功能的遊標庫。
lib/ui-server：UI 伺服器，提供將 UI 元件對應到系統視窗的能力。
lib/ui-router：提供路由映射和導航功能的路由器管理器。
lib/ui-widgets：預先定義的基本元件庫，提供文字、按鈕、捲軸等基本UI元件。
lib/worker：工作執行緒庫，提供簡單的工作執行緒通訊和管理功能。

快速入門

在開始之前，您需要在電腦上安裝以下軟體：

Git：版本控制工具，用於下載範例專案的原始程式碼。
XMake：用於建置專案的建置工具。
Node.js：用於執行LCUI命令列開發工具的JavaScript運行環境。

然後，在命令列視窗中執行以下命令：

 # Install the LCUI command-line development tool
npm install -g @lcui/cli

# Create an LCUI application project
lcui create my-lcui-app

隨後按照命令提供的提示進行操作。

文件

線上文件
徵求意見 (RFC)
變更日誌
貢獻指南

教學

Todo List：了解 LCUI 的基本概念和使用，以及如何使用它來建立介面並實現狀態管理、介面更新和互動。
渲染織物動畫：以C語言重寫現有織物模擬程式的JavaScript原始程式碼，並使用cairo圖形庫進行織物渲染。然後，應用LCUI實現布料動畫播放和互動。
瀏覽器：參考網頁瀏覽器，使用LCUI實現類似的介面結構、佈局、風格、多標籤管理功能。利用LCUI的路由管理功能實現多標籤頁狀態管理和導航，以及簡單的文件瀏覽頁面。 （本教學已過時，歡迎貢獻更新）

參考

LCUI 和相關專案的一些功能受到其他開源專案的啟發。您可以參考他們的文件來了解基本概念和用法。

DirectXTK：步數計時器的原始程式碼參考。
Vue Router：路由器管理器的參考。一些功能也參考了Vue Router的原始碼。
Next.js：路由定義方法參考。

路線圖

以下是即將推出的項目：

LCUI
- 改進API設計。
- 增強CSS引擎以支援inherit 、 !important和escape字元。
- 新增SDL後端來取代lib/ptk庫。
- 適配其他開源圖形庫，以獲得更好的渲染效能。
命令列工具
- lcui build --watch ：持續監視檔案變更並自動重建。
- lcui dev-server ：與 webpack-dev-server 類似，將 LCUI 應用程式建置為開發人員在瀏覽器中預覽介面的網站。
- 添加建置緩存以僅重建已更改的檔案。
React元件庫：參考一些Web前端元件庫（例如radix、shadcn/ui），開發適合LCUI應用的TypeScript + React元件庫，重複使用LC Design元件庫中的元件。
文件
- 教學
- 徵求意見 (RFC)

貢獻

覺得 LCUI 更新慢嗎？為 LCUI 做出貢獻的方式有很多。

提交錯誤並幫助我們在簽入修復後驗證修復。
在問題頁面中分享一些與 GUI 開發相關的有趣想法。
在原始程式碼中搜尋FIXME註釋並嘗試修復它們。
在 IssueHunt 上資助您感興趣的問題，以吸引其他開發者做出貢獻。
查看原始碼變更。
貢獻錯誤修復。

LCUI 已採用貢獻者契約定義的行為準則。該文件在許多開源社群中使用，我們認為它很好地闡明了我們的價值觀。有關更多信息，請參閱行為準則。

常問問題

這是瀏覽器內核嗎？或是像Electron這樣整合瀏覽器環境的開發庫？

不，你可以把它看作是應用了一些Web技術的傳統GUI開發庫。

既然支援使用TypeScript語言，為什麼我不使用Electron呢？

是的，如果你有Web開發經驗並且願意學習Electron，那麼Electron顯然是最好的選擇。

以LCUI目前的能力來說，主要適合滿足作者的個人需求，開發簡單的工具。

為什麼我應該選擇 LCUI 而不是其他 GUI 庫/框架？

我們建議您優先考慮其他 GUI 庫/框架。

CSS 支援怎麼樣？

以下是受支援的 CSS 功能的清單。勾選是支持（但不代表完全支持）。預設不支援未列出的屬性。

CSS 功能覆蓋

按規則
- @font-face
- @keyframes
- @media
關鍵字
- !important
選擇器
- *
- type
- #id
- .class
- :hover
- :focus
- :active
- :first-child
- :last-child
- [attr="value"]
- :not()
- :nth-child()
- parent > child
- a ~ b
- ::after
- ::before
- …
單位
- 像素
- DP
- sp
- 點
- %
- 雷姆
- 維赫
- 大眾汽車
特性
- 上、右、下、左
- 寬度、高度
- 能見度
- 展示
  - 沒有任何
  - 內聯塊
  - 堵塞
  - 彎曲
  - 內聯柔性
  - 排隊
  - 網格
  - 桌子
  - 表格單元格
  - 表格行
  - 表格-列
  - …
- 位置
  - 靜止的
  - 相對的
  - 絕對
  - 固定的
- 盒子尺寸
  - 邊框
  - 內容框
- 邊界
- 邊界半徑
- 背景顏色
- 背景影像
- 背景位置
- 背景封面
- 背景
- 指針事件
- 字體
- 字體系列
- 字體大小
- 字體樣式
- 彎曲
- 彎曲收縮
- 彈性成長
- 彈性基礎
- 柔性包裹
- 彎曲方向
- 證明內容合理
  - 彈性啟動
  - 中心
  - 柔性端
- 對齊項目
  - 彈性啟動
  - 中心
  - 柔性端
  - 拉緊
- 漂浮
- 過渡
- 轉換
- …