Skip to content

Latest commit

 

History

History
305 lines (239 loc) · 13.4 KB

README.zh-cn.md

File metadata and controls

305 lines (239 loc) · 13.4 KB

LCUI

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

GitHub Actions Repo size Code size

目录

介绍

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

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

主要特性

  • 跨平台: 支持 Windows、Linux。
  • 全自绘组件: 组件在多个平台中都能保持一致的外观和行为。
  • 自带 CSS 引擎: 支持使用 CSS 来定义用户界面的样式和布局,对于有网页开发经验的人比较容易上手。
  • 提供现代化的开发工具: 该工具允许你使用 TypeScript 语言搭配 JSX 语法、 React 库以及其它 Web 前端技术来编写用户界面。

一图速览

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

preview

  • 类 React 组件开发方式: 用 TypeScript 语言编写界面配置文件,结合 TypeScript 的语言优势、JSX 语法特性和 LCUI React 库,你能够以简洁的代码描述界面结构、资源依赖、组件状态、数据绑定以及事件绑定。
  • 多种样式编写方式: Tailwind CSSCSS ModulesSass、全局 CSS。
  • 基于目录的路由定义方式: 以文件目录的形式组织应用的各个页面,每个页面对应一个目录,目录的路径即是该页面的路由。借助内置的应用路由器,你可以轻松地实现页面之间的切换和导航,无需手动配置路由规则。
  • 友好且现代的图标库: 图标源自 fluentui-system-icons 库,针对 LCUI 的特性做了部分定制,用法相似。
  • 命令行开发工具: 运行 lcui build 命令预处理 app 目录内的配置文件,然后生成相应的 C 源码和资源文件。

架构

LCUI 建立在各种库的基础之上:

  • lib/yutil: 实用工具库,提供常用的数据结构和函数。
  • lib/pandagl: PandaGL (Panda Graphics Library) 图形库,提供字体管理、文字排版、图片读写、图形处理和渲染能力。
  • lib/css: CSS 解析器和选择引擎,提供 CSS 解析和选择能力。
  • lib/ptk: 平台库(Ping Tai Ku),提供跨平台统一的系统相关 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

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

文档

教程

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

参考资料

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

路线图

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

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

贡献

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

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

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

常见问题

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

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

都用上 TypeScript 语言了,那我为什么不直接用 Electron?

是的,如果你有 web 开发经验且愿意学习 Electron,显然 Electron 是最合适的选择。

以 LCUI 现有的条件,除了满足作者的个人需求外,也就只适用于开发一些简单的小工具。

相比其它 GUI 库/框架,我为什么选择 LCUI?

建议优先考虑其它 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 特性。勾选的即是支持(但并不意味着完全支持),未列出特性则默认不支持。

CSS 特性覆盖情况
  • at rules
    • @font-face
    • @keyframes
    • @media
  • keywords
    • !important
  • selectors
    • *
    • type
    • #id
    • .class
    • :hover
    • :focus
    • :active
    • :first-child
    • :last-child
    • [attr="value"]
    • :not()
    • :nth-child()
    • parent > child
    • a ~ b
    • ::after
    • ::before
    • ...
  • units
    • px
    • dp
    • sp
    • pt
    • %
    • rem
    • vh
    • vw
  • properties
    • top, right, bottom, left
    • width, height
    • visibility
    • display
      • none
      • inline-block
      • block
      • flex
      • inline-flex
      • inline
      • grid
      • table
      • table-cell
      • table-row
      • table-column
      • ...
    • position
      • static
      • relative
      • absolute
      • fixed
    • box-sizing
      • border-box
      • content-box
    • border
    • border-radius
    • background-color
    • background-image
    • background-position
    • background-cover
    • background
    • pointer-events
    • font-face
    • font-family
    • font-size
    • font-style
    • flex
    • flex-shrink
    • flex-grow
    • flex-basis
    • flex-wrap
    • flex-direction
    • justify-content
      • flex-start
      • center
      • flex-end
    • align-items
      • flex-start
      • center
      • flex-end
      • stretch
    • float
    • transition
    • transform
    • ...

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

许可

MIT