跳到主要内容

UI 构建概述

简介​

正如我们在 GUI 引擎 章节中介绍的，dejaOS 的图形引擎基于开源图形库 LVGL。而 dxUi 模块是我们为 LVGL C 语言 API 提供的 JavaScript 封装，使开发者能够用 JavaScript 快速构建图形界面。

所有搭载屏幕的 dejaOS 设备的 GUI 开发都基于 dxUi 模块实现。

关于 dxUi 模块​

dxUi 是 dejaOS 提供的 UI 构建模块，它具有以下特点：

  • 一对一封装：dxUi 对 LVGL 的 C 函数进行了一对一的 JavaScript 封装，保持了 LVGL 的原生特性
  • 简单易用：使用 JavaScript 语法，对常用函数做了进一步的封装和简化，原始的 LVGL 函数名都非常长
  • 完整功能：支持 LVGL 的所有核心功能，包括控件、样式、动画、事件等
  • 零学习成本迁移：如果您熟悉 LVGL，可以快速上手 dxUi
重要提示

dejaOS 并未创建新的 UI 概念或范式，所有概念都直接来源于 LVGL。因此，如果您已经熟悉 LVGL，可以非常快速地上手 dxUi 开发。

文档目标​

本系列文档将通过多个示例和详细说明，帮助您：

  • 学习如何在 dejaOS 下构建从简单到复杂的图形界面
  • 理解 LVGL/dxUi 的核心概念（对象、样式、事件、布局等）
  • 掌握常用 UI 组件的使用方法
  • 了解 UI 开发的最佳实践

学习路径建议​

如果您是 LVGL 新手​

建议按以下顺序学习：

  1. 先快速浏览 LVGL 8.3 官方文档，了解基本概念
  2. 回到本文档，查看 dejaOS 中的具体实现和示例
  3. 通过实际项目练习巩固知识

如果您已熟悉 LVGL​

您可以：

  1. 快速浏览本文档，了解 JavaScript API 的调用方式
  2. 查看代码示例，理解 dxUi 的使用模式
  3. 直接开始开发您的应用

利用 AI​

由于大部分 UI 的构建都具备相似性，我们可以利用 AI 工具快速生成复杂的图形界面。这在实际项目中已经得到了很好的实践验证。

让我们开始探索 dejaOS 的 UI 开发之旅吧！