Project Icon

LCUI

轻量级C语言跨平台GUI开发库

LCUI是一款轻量级的C语言图形用户界面库,专注于探索创新的UI开发方法。它支持跨平台开发,提供自定义绘制组件和内置CSS引擎,同时融合了TypeScript、JSX和React等现代前端技术。LCUI特别适合开发小型桌面应用和学习GUI编程,为开发者提供了便捷的工具和灵活的开发体验。

LCUI

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

GitHub Actions 仓库大小 代码大小

目录

简介

中文版说明文档

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 CSSCSS ModulesSass 和全局 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

之后按照命令提供的提示进行操作。

文档

教程

  • 待办事项列表:学习LCUI的基本概念和用法,以及如何使用它构建界面并实现状态管理、界面更新和交互。
  • 渲染布料动画:将现有布料模拟程序的JavaScript源代码改写成C语言,并使用cairo图形库进行布料渲染。然后应用LCUI来实现布料动画播放和交互。
  • 浏览器:参考网页浏览器,使用LCUI实现类似的界面结构、布局、样式和多标签页管理功能。利用LCUI的路由管理功能实现多标签页的页面状态管理和导航,以及简单的文件浏览页面。(此教程已过时,欢迎贡献更新)

参考资料

LCUI和相关项目的一些功能受到其他开源项目的启发。你可以参考它们的文档来了解基本概念和用法。

路线图

以下是即将进行的项目:

  • LCUI
    • 改进API设计。
    • 增强CSS引擎,支持inherit!important和转义字符。
    • 添加SDL后端以替代lib/platform库。
    • 适配其他开源图形库以提高渲染性能。
  • 命令行工具
    • lcui build --watch:持续监视文件变化并自动重新构建。
    • lcui dev-server:类似webpack-dev-server,将LCUI应用构建为网站,供开发者在浏览器中预览界面。
    • 添加构建缓存,只重新构建已更改的文件。
  • React组件库:参考一些Web前端组件库(如radixshadcn/ui),开发适用于LCUI应用的TypeScript + React组件库,复用LC Design组件库中的组件。
  • 文档
    • 教程
  • 意见征询(RFC)

贡献

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

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

常见问题

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

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

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

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

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

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

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

CSS 支持情况如何?

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

CSS 特性覆盖范围
  • at 规则
    • @font-face
    • @keyframes
    • @media
  • 关键字
    • !important
  • 选择器
    • *
    • type
    • #id
    • .class
    • :hover
    • :focus
    • :active
    • :first-child
    • :last-child
    • [attr="value"]
    • :not()
    • :nth-child()
    • parent > child
    • a ~ b
    • ::after
    • ::before
    • ...
  • 单位
    • px
    • dp
    • sp
    • pt
    • %
    • rem
    • vh
    • vw
  • 属性
    • 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
    • ...

许可证

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

项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手,通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能,支持100+编程语言,与主流编辑器无缝集成,显著提升开发效率和代码质量。

Project Cover

问小白

问小白是一个基于 DeepSeek R1 模型的智能对话平台,专为用户提供高效、贴心的对话体验。实时在线,支持深度思考和联网搜索。免费不限次数,帮用户写作、创作、分析和规划,各种任务随时完成!

Project Cover

白日梦AI

白日梦AI提供专注于AI视频生成的多样化功能,包括文生视频、动态画面和形象生成等,帮助用户快速上手,创造专业级内容。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案,通过智能技术简化视频制作流程。无论是企业宣传还是个人分享,有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

讯飞绘镜

讯飞绘镜是一个支持从创意到完整视频创作的智能平台,用户可以快速生成视频素材并创作独特的音乐视频和故事。平台提供多样化的主题和精选作品,帮助用户探索创意灵感。

Project Cover

讯飞文书

讯飞文书依托讯飞星火大模型,为文书写作者提供从素材筹备到稿件撰写及审稿的全程支持。通过录音智记和以稿写稿等功能,满足事务性工作的高频需求,帮助撰稿人节省精力,提高效率,优化工作与生活。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术,为商家提供一键生成商品图和营销文案的服务,显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台,让商品第一时间被种草。

Project Cover

Trae

Trae是一种自适应的集成开发环境(IDE),通过自动化和多元协作改变开发流程。利用Trae,团队能够更快速、精确地编写和部署代码,从而提高编程效率和项目交付速度。Trae具备上下文感知和代码自动完成功能,是提升开发效率的理想工具。

Project Cover

AIWritePaper论文写作

AIWritePaper论文写作是一站式AI论文写作辅助工具,简化了选题、文献检索至论文撰写的整个过程。通过简单设定,平台可快速生成高质量论文大纲和全文,配合图表、参考文献等一应俱全,同时提供开题报告和答辩PPT等增值服务,保障数据安全,有效提升写作效率和论文质量。

投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号