LCUI

LCUI

用于构建用户界面的C语言库

目录

• 目录
• 简介
  • 主要特性
  • 功能概览
  • 架构
• 快速开始
• 文档
  • 教程
  • 参考资料
• 路线图
• 贡献
• 常见问题
• 许可证

简介

中文版说明文档

LCUI 是一个用 C 语言编写的用于构建图形用户界面的库。它的目标是探索和实践开发用户界面的新方式，特点是体积小、易于使用，并提供便捷的开发工具，帮助开发者快速创建带有图形用户界面的桌面应用程序。

LC 源自作者名字的首字母。该库最初是为了帮助作者开发小项目和获取开发经验而设计的。然而，作者在充满 C/C++ 专家的就业市场中并未获得竞争优势，因此不得不从事 Web 前端开发工作。因此，LCUI 现在倾向于整合来自 Web 前端领域的技术。

主要特性

• 跨平台： 支持 Windows 和 Linux。
• 完全自绘组件： 组件在多个平台上保持一致的外观和行为。
• 内置 CSS 引擎： 支持使用 CSS 定义用户界面的样式和布局，使具有 Web 开发经验的人更容易上手。
• 提供现代开发工具： 这些工具允许你使用 TypeScript 语言配合 JSX 语法、React 库以及其他 Web 前端技术来编写用户界面。

功能概览

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

• React 风格的组件开发： 使用 TypeScript 编写 UI 配置文件。结合 TypeScript、JSX 语法和 LCUI React 库的优势，你可以简洁地描述界面结构、资源依赖、组件状态、数据绑定和事件绑定。
• 多种样式表编写方式： Tailwind CSS、CSS Modules、Sass 和全局 CSS。
• 基于文件系统的路由： 以目录形式组织应用程序页面，每个页面对应一个目录。目录的路径作为该页面的路由。借助内置的应用程序路由器，你可以轻松实现页面切换和导航，无需手动配置路由。
• 用户友好且现代的图标库： 图标来源于 fluentui-system-icons 库，经过部分定制以适应 LCUI 的特性，提供类似的使用模式。
• 命令行开发工具： 运行 lcui build 命令可预处理应用程序目录内的配置文件，然后生成相应的 C 源代码和资源文件。

架构

随着时间的推移，LCUI 已经建立在各种库的基础之上：

• lib/yutil：提供常用数据结构和函数的实用工具库。
• lib/pandagl：PandaGL（Panda Graphics Library），提供字体管理、文本布局、图像 I/O、图形处理和渲染功能。
• 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），开发适用于LCUI应用的TypeScript + React组件库，复用LC Design组件库中的组件。
• 文档
  • 教程
• 意见征询（RFC）

贡献

认为 LCUI 更新太慢？有很多方式可以为 LCUI 做出贡献。

• 提交 bug 并帮助我们验证修复是否已经生效。
• 在 issues 页面 分享一些有关 GUI 开发的有趣想法。
• 在源代码中搜索 FIXME 注释并尝试修复它们。
• 在 IssueHunt 上为你感兴趣的问题提供资金，以吸引其他开发者参与贡献。
• 审查 源代码变更。
• 贡献 bug 修复。

LCUI 采用了 Contributor Covenant 定义的行为准则。这份文档在许多开源社区中被广泛使用，我们认为它很好地阐述了我们的价值观。更多信息请参见 行为准则。

常见问题

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

不是，你可以将它视为一个应用了一些 Web 技术的传统 GUI 开发库。

既然支持使用 TypeScript 语言，为什么我不使用 Electron 呢？

是的，如果你有 Web 开发经验并愿意学习 Electron，那么 Electron 显然是最佳选择。

考虑到 LCUI 当前的能力，它主要适合满足作者的个人需求和开发简单的工具。

为什么我应该选择 LCUI 而不是其他 GUI 库/框架？

我们建议你优先考虑其他 GUI 库/框架。

CSS 支持情况如何？

以下是支持的 CSS 特性列表。打勾的表示已支持（但不意味着完全支持）。未列出的属性默认不支持。

许可证

LCUI 项目基于 MIT 许可证 发布。