LCUI 用 C 语言编写的桌面端图形界面开发库

Question

C 的图形界面开发库，可借助 XML 和 CSS 构建简单的跨平台桌面应用。

主要特性

• C 语言编写： 适用于体积较小且主要使用 C 语言实现的应用程序，以及偏向使用 C 语言编写简单应用的开发者。
• 跨平台： 支持 Windows 和 GNU/Linux 系统，可开发简单的 Windows 桌面应用和通用应用，以及 Linux 桌面应用。
• XML + CSS： 预置 XML 和 CSS 解析器，你可以使用 XML 和 CSS 来描述界面结构和样式。
• 与网页类似的开发体验： 由于 LCUI 的布局、样式和渲染器等相关功能的设计和实现大都参考了 MDN 文档和一些 Web 前端流行的开发库，因此开发体验和界面效果会与网页有一些相似之处，如果你已经有用 HTML 和 CSS 编过网页的经验，那么会比较容易上手。
• 可缩放： 支持全局缩放，支持使用基于屏幕密度的 sp 和 dp 单位表示界面元素的位置和大小。

效果图

相关项目

想要了解 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 的一些组件的简单用法和效果。

设计参考

• SDL — x11 的驱动代码参考
• FreeType — 数据结构的命名风格参考
• LevelDB — 函数命名风格参考
• jQuery — 部件操作接口的命名风格参考
• MDN — CSS 标准参考

快速上手

Windows

创建新的 LCUI 应用项目

使用 lcui-cli 快速创建一个 LCUI 应用项目：

# 安装 lcui-cli 和 lcpkg
npm install -g @lcui/cli lcpkg

# 创建一个名为 myapp 的 LCUI 项目
lcui create myapp

# 进入项目目录
cd myapp

# 安装依赖库
lcpkg install

# 启动这个项目
lcpkg run start

为已有的项目安装 LCUI

在你的项目目录里使用 lcpkg 来快速安装 LCUI：

# 初始化 lcpkg 配置文件，告诉 lcpkg 你的项目相关信息
lcpkg init

# 从 GitHub 下载安装已编译好的 LCUI 库
lcpkg install github.com/lc-soft/LCUI

手动编译安装

如果你想手动从源码编译 LCUI：

1. 打开命令行窗口，在 LCUI 的源码目录中使用以下命令安装依赖库：

   lcpkg install
   # 如果你需要编译 x64 版本的话
   lcpkg install --arch x64
   # 如果你需要编译适用于 Windows 通用应用平台 (UWP) 版本的话
   lcpkg install --platform uwp
   lcpkg install --arch x64 --platform uwp

2. 重命名 include 目录中的 config.win32.h.in 文件为 config.h。
3. 使用 Visual Studio 打开 build/windows/LCUI.sln 文件，然后编译生成 LCUI。

Ubuntu

# 安装依赖库
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 文件。

常见问题

1. 为什么开发它？
   • 探索和实验新的 GUI 开发方式
   • 给职业生涯赚点加分项
   • 找点存在感
   • 打发时间
2. 这是一个浏览器内核吗？或者是像 Electron 这样的集成了浏览器环境的开发库？不是，你可以当成是一个应用了部分 Web 技术的传统 GUI 开发库。
3. 我为什么要用 LCUI，而不是 Electron？除了技术研究与交流，以及为开源社区发展做贡献外，你没有理由用 LCUI。相较于功能完备的 Electron 而言，文件体积小和内存占用低并没有什么用，毕竟现在机器配置都很高，即便 APP 的界面卡到爆，占用上百 MB 的内存和近 1 GB 的存储空间，只要能正常运作就够了。
4. 假如我要用它的话，需要注意什么？建议你的项目满足以下条件：
   • 界面结构简单，以静态内容为主，不需要动画、表格、渐变背景色等高级特性。
   • 代码设计合理，核心功能代码与界面逻辑分离，即便在使用 LCUI 后发现不符合需求，也能轻松迁移至其它 GUI 库。
5. 适合哪些人使用？适合有 GUI 应用开发经验、熟悉 Web 前端开发技术、有意向参与开源项目的 C 开发者使用，最好是具备两年 C 开发经验和一年 web 前端开发经验。以时间来衡量上手门槛可能有点不妥，以下按照技术方向分别列出了一些主要条件，你可自行判断自己是否能够快速上手。

   C：

   • 熟悉 C 语言及编译相关工具链的配置，能解决编译问题
   • 熟悉至少一种图形库和 GUI 库/框架，了解 GUI 应用程序的工作原理
   • 熟悉多线程编程，能够解决线程安全、线程同步等问题
   • 能熟练使用调试工具定位问题
   • 有较多的开源项目源码阅读经验

   Web 前端：

   • 熟练掌握常见布局
   • 熟悉 CSS 盒子模型和常用属性
   • 有良好的 CSS 编码风格
   • 了解前端工程化和相关开发工具
6. 和写网页一样吗？需要注意什么？不一样，主要有以下差异需要注意：
   • 界面描述文件格式是 XML，与 HTML 有一点区别。
   • 本质上是在写 C 代码，开发效率比 JavaScript 低很多。
   • 没有 <script> 标签，你不能像 HTML 那样内嵌 JavaScript 或 C 代码。
   • 部件 (Widget) 是基本的界面布局元素，不是文字，不支持图文混排，不存在 inline 显示类型。
   • 滚动条是一个独立的部件，使用 overflow: scroll; 样式不会出现滚动条，你需要主动创建它并指定容器和滚动层。
   • 所有文本由 TextView 部件渲染，它的显示类型为 block 而不是 inline。
   • 部件不会溢出父级部件的边界框，效果类似于已应用样式：overflow: hidden;。
   • 绝对定位的部件始终相对于其父级部件，而不是父级第一个非静态定位的部件。
   • 没有像 Chrome Devtools 这样的工具来调试图形界面，你需要凭借自己的想象力和开发经验来验证 BUG 是来自你的代码还是 LCUI 内部的。
7. 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
8. 我想要 ???? 功能，就像 ???? 里的那样。请先新建 issue，按照已有的模板补全内容。
9. 求添加 JavaScript/Python/Go/Rust/PHP/C#/Java 语言绑定已有官方支持的 Trad 语言绑定，不考虑添加其它语言绑定。如果你实在需要的话可以自己动手设计，毕竟你比作者更懂这些语言的编程思想和设计哲学，也算是一个展现技术实力的好机会。

项目地址：https://github.com/lc-soft/LCUI