C 的图形界面开发库,可借助 XML 和 CSS 构建简单的跨平台桌面应用
LCUI 是一个用 C 语言编写的桌面端图形界面开发库。
- C 语言编写: 适用于体积较小且主要使用 C 语言实现的应用程序,以及偏向使用 C 语言编写简单应用的开发者。
- 跨平台: 支持 Windows 和 GNU/Linux 系统,可开发简单的 Windows 桌面应用和通用应用,以及 Linux 桌面应用。
- XML + CSS: 预置 XML 和 CSS 解析器,你可以使用 XML 和 CSS 来描述界面结构和样式。
- 与网页类似的开发体验: 由于 LCUI 的布局、样式和渲染器等相关功能的设计和实现大都参考了 MDN 文档和一些 Web 前端流行的开发库,因此开发体验和界面效果会与网页有一些相似之处,如果你已经有用 HTML 和 CSS 编过网页的经验,那么会比较容易上手。
- 可缩放: 支持全局缩放,支持使用基于屏幕密度的 sp 和 dp 单位表示界面元素的位置和大小。
平台 | 构建状态 |
---|---|
Windows | |
Linux | |
OSX |
想要了解 LCUI 具体能做什么?你可以查看以下项目:
- LCUI CLI - 用于开发 LCUI 应用程序的命令行工具。
- LCUI Router - LCUI 的路由管理器,用于解决 LCUI 应用内多视图的切换和状态管理问题,代码设计参考自 Vue Router。
- LC Design — 专为 LCUI 开发的组件库,包含了一些通用组件和 CSS 样式,组件设计参考自 Bootstrap、ElementUI、AntDesign。
- LC Finder — 图片管理器,LCUI 的旗舰级应用程序,你可以将它作为参考对象,以此评估 LCUI 的性能、界面效果和开发复杂度是否符合你的需求。
- Trad — 基于 JavaScript 语法且可编译为 C 的语言,预置 LCUI 绑定,提供类似于 React 的声明式 UI 开发体验。
- LCUI Quick Start - LCUI 应用程序模板。
- LCUI Router App - LCUI Router 的应用程序模板,实现了和浏览器一样的图形界面、多标签页、路由导航等功能。
- LC Design App - LC Design 组件库的应用程序模板,展示了 LC Design 的一些组件的简单用法和效果。
使用 lcui-cli 快速创建一个 LCUI 应用项目:
# 安装 lcui-cli
npm install -g @lcui/cli
# 创建一个名为 myapp 的 LCUI 项目
lcui create myapp
# 进入项目目录
cd myapp
# 安装依赖库
lcpkg install
# 启动这个项目
lcpkg run start
在你的项目目录里使用 lcpkg 来快速安装 LCUI:
# 初始化 lcpkg 配置文件,告诉 lcpkg 你的项目相关信息
lcpkg init
# 从 GitHub 下载安装已编译好的 LCUI 库
lcpkg install github.com/lc-soft/LCUI
如果你想手动从源码编译 LCUI:
- 打开命令行窗口,在 LCUI 的源码目录中使用以下命令安装依赖库:
lcpkg install # 如果你需要编译 x64 版本的话 lcpkg install --arch x64 # 如果你需要编译适用于 Windows 通用应用平台 (UWP) 版本的话 lcpkg install --platform uwp lcpkg install --arch x64 --platform uwp
- 重命名 include 目录中的
config.win32.h.in
文件为config.h
。 - 使用 Visual Studio 打开
build/windows/LCUI.sln
文件,然后编译生成 LCUI。
# 安装依赖库
sudo apt-get install libpng-dev libjpeg-dev libxml2-dev libfreetype6-dev libx11-dev
# 克隆代码库
git clone https://github.com/lc-soft/LCUI.git
# 进入源码目录
cd LCUI
# 生成配置脚本
./autogen.sh
# 配置环境及构建工具
./configure
# 构建
make
# 如果需要安装的话
sudo make install
# 进入测试程序目录
cd test
# 运行 helloworld 程序
./helloworld
提示: 如果需要自定义编译器、编译参数、安装位置等配置,请查阅 INSTALL 文件。
教程只有一部分,并且已经很久没有更新了,你可以参考头文件、源代码、示例程序以及上述的相关项目来了解基本用法。如果你希望我们能够为此项目提供完善的文档,可以考虑花时间帮助我们制定文档目录、章节和内容范围,相当于撰写一个文档模板,这样我们就不用花费时间在参考各种技术文档、思考初学者需要知道些什么、以及组织内容结构等工作上面,只需根据已定好的章节标题补全剩余内容即可。
此项目的开发计划分为主线和支线,主线中的开发任务主要由项目维护者负责推进,优先级较高,按照时间范围分为以下三类:
- 近期计划
- 添加安卓端适配
- 开发示例移动端应用
- 撰写移动端应用开发教程
- 中期计划
- 开发移动端组件库
- 未来计划
- 为移动端组件库添加 React 实现,使之能应用在 Web 前端项目
- 重新设计 Trad 语言并重写其编译器,使之能应付基础的 UI 开发需求
- 重新设计图形抽象接口,支持引入主流的图形库来丰富图形元素的渲染方式
- 优化 CSS 样式库的内存占用
- 优化字体缓存库的内存占用
- 支持编译为 WebAssembly 运行在浏览器上
- 为 CSS 解析器添加支持
@media
查询 - 完善文档和教程
其它的任务则归为支线,交给开源社区贡献者以及像你这样的开发者来推进。如需了解更多细节可查看 issues 和项目页面。
有很多方式可以为此项目的发展做贡献:
- 反馈问题并在问题关闭时帮助我们验证它们是否已经修复
- 在源码中搜索 FIXME 注释,然后尝试解决它们
- 在 IssueHunt 上为感兴趣的 issue 设置悬赏,吸引其他开发者参与开发
- 审查源代码的改动
- 修复已知问题
本项目采用了参与者公约定义的行为准则,该文档应用于许多开源社区,有关更多信息,请参阅《行为准则》。
经济支持是最简单有效的支持方式,它能直接影响此项目的活跃度和贡献者数量,如果你看好此项目的发展前景,可以考虑在以下平台提供资金赞助:
- 爱发电: https://afdian.net/@lc-soft
- OpenCollective: https://opencollective.com/LCUI
-
为什么开发它?
- 探索和实验新的 GUI 开发方式
- 给职业生涯赚点加分项
- 找点存在感
- 打发时间
-
这是一个浏览器内核吗?或者是像 Electron 这样的集成了浏览器环境的开发库?
不是,你可以当成是一个应用了部分 Web 技术的传统 GUI 开发库。
-
我为什么要用 LCUI,而不是 Electron?
除了技术研究与交流,以及为开源社区发展做贡献外,你没有理由用 LCUI。相较于功能完备的 Electron 而言,文件体积小和内存占用低并没有什么用,毕竟现在机器配置都很高,即便 APP 的界面卡到爆,占用上百 MB 的内存和近 1 GB 的存储空间,只要能正常运作就够了。
-
假如我要用它的话,需要注意什么?
建议你的项目满足以下条件:
- 界面结构简单,以静态内容为主,不需要动画、表格、渐变背景色等高级特性。
- 代码设计合理,核心功能代码与界面逻辑分离,即便在使用 LCUI 后发现不符合需求,也能轻松迁移至其它 GUI 库。
-
适合哪些人使用?
适合有 GUI 应用开发经验、熟悉 Web 前端开发技术、有意向参与开源项目的 C 开发者使用,最好是具备两年 C 开发经验和一年 web 前端开发经验。以时间来衡量上手门槛可能有点不妥,以下按照技术方向分别列出了一些主要条件,你可自行判断自己是否能够快速上手。
C:
- 熟悉 C 语言及编译相关工具链的配置,能解决编译问题
- 熟悉至少一种图形库和 GUI 库/框架,了解 GUI 应用程序的工作原理
- 熟悉多线程编程,能够解决线程安全、线程同步等问题
- 能熟练使用调试工具定位问题
- 有较多的开源项目源码阅读经验
Web 前端:
- 熟练掌握常见布局
- 熟悉 CSS 盒子模型和常用属性
- 有良好的 CSS 编码风格
- 了解前端工程化和相关开发工具
-
和写网页一样吗?需要注意什么?
不一样,主要有以下差异需要注意:
- 界面描述文件格式是 XML,与 HTML 有一点区别。
- 本质上是在写 C 代码,开发效率比 JavaScript 低很多。
- 没有
<script>
标签,你不能像 HTML 那样内嵌 JavaScript 或 C 代码。 - 部件 (Widget) 是基本的界面布局元素,不是文字,不支持图文混排,不存在
inline
显示类型。 - 滚动条是一个独立的部件,使用
overflow: scroll;
样式不会出现滚动条,你需要主动创建它并指定容器和滚动层。 - 所有文本由 TextView 部件渲染,它的显示类型为
block
而不是inline
。 - 部件不会溢出父级部件的边界框,效果类似于已应用样式:
overflow: hidden;
。 - 绝对定位的部件始终相对于其父级部件,而不是父级第一个非静态定位的部件。
- 没有像 Chrome Devtools 这样的工具来调试图形界面,你需要凭借自己的想象力和开发经验来验证 BUG 是来自你的代码还是 LCUI 内部的。
-
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
- visiblility
- 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-evnets
- 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
- ...
- at rules
-
我想要 ???? 功能,就像 ???? 里的那样。
请先新建 issue,按照已有的模板补全内容。
-
求添加 JavaScript/Python/Go/Rust/PHP/C#/Java 语言绑定
已有官方支持的 Trad 语言绑定,不考虑添加其它语言绑定。如果你实在需要的话可以自己动手设计,毕竟你比作者更懂这些语言的编程思想和设计哲学,也算是一个展现技术实力的好机会。
LCUI 采用的开源许可证是 MIT。