LCUI

用于开发图形用户界面的 C 库

目录

• 目录
• 介绍
  • 一图速览
  • 架构
• 快速体验
• 文档
  • 教程
  • 参考资料
• 路线图
• 贡献
• 常见问题
• 许可

介绍

LCUI 是一个用 C 语言编写的用于构建图形用户界面的库，其功能设计和用法参考了 Web 领域内的一些流行的技术，例如：CSS、Flex 布局，对于有 Web 网页开发经验的人比较容易上手。

LC 源自作者名字首字母，设计之初的目的是为了方便作者开发一些小项目和积累开发经验，不过遗憾的是作者并没有因此在 C/C++ 高手众多的就业环境下获得足够竞争优势，被迫从事 Web 前端开发工作，也正是因为如此，LCUI 现在的发展方向偏向于融合 Web 前端领域的技术。

一图速览

你可以从下图了解 LCUI 应用程序的开发体验：

• 类 React 组件开发方式： 用 TypeScript 语言编写界面配置文件，结合 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 Graphics Library) 图形库，提供字体管理、文字排版、图片读写、图形处理和渲染能力。
• lib/css: CSS 解析器和选择引擎，提供 CSS 解析和选择能力。
• lib/platform: 平台库，提供跨平台统一的系统相关 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: JavaScript 运行环境，用于运行 LCUI 的命令行开发工具

然后在命令行窗口中运行以下命令：

# 安装 LCUI 命令行开发工具
npm install -g @lcui/cli

# 创建 LCUI 应用程序项目
lcui create my-lcui-app

之后按照命令输出的提示继续操作。

文档

• 在线文档
• 意见征集稿（RFC）
• 更新日志
• 贡献指南

教程

• 待办清单：学习 LCUI 的基本概念和用法，以及如何使用它构建界面，并实现状态管理、界面更新和交互。
• 渲染布料动画：参照现有的布料模拟程序的 JavaScript 源码，以 C 语言重新编写，并采用 cairo 图形库进行布料渲染，再运用 LCUI 实现布料动画的播放和交互。
• 浏览器：参照网页浏览器，用 LCUI 实现与之类似的界面结构、布局、样式和多标签管理功能，并运用 LCUI 路由管理功能实现多标签页的状态管理和导航，以及一个简单的文件浏览页面。（该教程已过时，欢迎参与更新）

参考资料

LCUI 及相关项目的部分功能设计参考了其它开源项目，你可以查看它们的文档以了解基本概念和用法。

• DirectXTK：步进定时器的源码参考。
• Vue Router：路由管理器的参考，部分功能的实现还参考了 Vue Router 的源码。
• Next.js：路由定义方式的参考。

路线图

以下是未来可推进的事项：

• LCUI
  • 改进 API 设计。
  • 改进 CSS 引擎，增加支持 inherit、!important、转义字符。
  • 添加 SDL 后端，代替 lib/platform 库。
  • 适配其它开源图形库，以获得更好的渲染性能。
• 命令行工具
  • lcui build --watch：持续监听文件变更并自动重新构建。
  • lcui dev-server：与 webpack-dev-server 类似，将 LCUI 应用构建为网站以便开发者在浏览器中预览界面。
  • 添加构建缓存，仅重新构建有更改的文件。
• React 组件库：参考一些 web 前端组件库（例如：radix、shadcn/ui），用 TypeScript + React 开发一个适用于 LCUI 应用程序的组件库，复用 LC Design 组件库中的组件。
• 文档
  • 教程
  • 意见征集稿（RFC）

贡献

有很多方式可以为此项目的发展做贡献：

• 完善 lib 目录中各个库的自述文档，内容包括但不仅限于补充示例代码、相关功能讲解、运行效果图等
• 反馈问题并在问题关闭时帮助我们验证它们是否已经修复
• 在源码中搜索 FIXME 注释和 TODO 注释，然后尝试解决它们
• 在 IssueHunt 上为感兴趣的 issue 设置悬赏，吸引其他开发者参与开发
• 审查源代码的改动
• 修复已知问题

本项目采用了参与者公约定义的行为准则，该文档应用于许多开源社区，有关更多信息，请参阅《行为准则》。

常见问题

这是一个浏览器内核吗？或者是像 Electron 这样的集成了浏览器环境的开发库？

不是，你可以当成是一个应用了部分 Web 技术的传统 GUI 开发库。

建议添加 MacOS、Android 系统支持！

这些特性的开发和维护成本较高，暂无相关计划。如果你迫切需要这些特性，你可以尝试实现它们，例如新建 lcui-macos 和 lcui-android 项目，然后在相关专业人员和 Chat GPT 的帮助下完成它们。

我想要 ???? 功能，就像 ???? 里的那样。

请先新建 issue，按照已有的模板补全内容，我们建议你尽量将需求描述清楚，如果能提供开发思路、相关参考文档等内容那是最好的，例如：

# 建议添加 xxx

（简介）xxx 是......
（特性）它能够......
（理由）对于 LCUI 它能解决 ...... 等问题
（实现思路）大致的实现方法是先这样......然后......再......最后......
（参考资料）具体可参考这些 ......

你也可以参考现有的意见征集稿（RFC）来撰写内容。

不推荐的写法：

# 建议添加 xxx

如题，我觉得很有必要，请添加，谢谢。

求添加 Python/Go/Rust/C#/Java 语言绑定！

LCUI 的命令行开发工具已经支持将 TypeScript 写的界面配置文件编译为 C 源文件，虽然不是语言绑定但也够用，所以作者不会再添加其它语言绑定。

如果你实在需要的话可以自己动手设计，毕竟你比作者更懂这些语言的编程思想和设计哲学，也算是一个展现技术实力的好机会。

CSS 标准的支持程度如何？

以下列出了支持的 CSS 特性。勾选的即是支持（但并不意味着完全支持），未列出特性则默认不支持。

具体的属性和值的支持情况可查看：lib/css/src/properties.c

许可

MIT