本文介绍如何使用 LVGL Pro 的 XML 编辑器创建项目，介绍项目的结构和文件，演示如何创建一个简单的项目并和 Zephyr 应用整合。

创建项目 链接到标题

双击 LVGL_Pro_Editor-1.0.0-rc2.AppImage, 打开 XML 编辑器。选择 Create UI Project, 在弹框中选择目录，输入项目名词，点击保存按钮创建一个新的项目。

项目结构 链接到标题

创建好项目后会默认生成一些文件夹和文件：

文夹件用于分类管理项目中的 XML 文件和资源

• components：存放组件 XML 文件
• fonts：存放字体文件
• images：存放图片文件
• screens：存放 Screen XML 文件
• widgets：存放控件 XML 文件

XML 文件

• project.xml：项目配置文件，包含项目的全局设置和屏幕大小定义。
• globals.xml：全局配置文件，包含项目的全局设置，如字体、颜色等。

生成文件，命名和使用都有一些约定的规则，以后在说明 LVGL XML 整合的相关文章做说明介绍：

• CMakeLists.txt
• file_list_gen.cmake
• ePTest.h
• ePTest.c
• ePTest_gen.h
• ePTest_gen.c

示例 链接到标题

用一个简单的示例展示如何创建一个 screen。 在 screens 目录下创建一个新的 XML 文件 main_screen.xml，内容如下：

<screen permanent="true">
	<view>
		<lv_button align="center">
			<lv_label text="Hello LVGL MXL Editor" />
		</lv_button>
	</view>
</screen>

在预览区就可以看见按钮和标签

在 LVGL Pro XML 编辑器中执行 Project->Build UI Project, 会在 screens 目录下生成对应的 C 文件和头文件：

• main_screen_gen.h
• main_screen_gen.c

同时也会修改file_list_gen.cmake将新产生的 c 文件加入其中

list(
  APPEND
  PROJECT_SOURCES
  ${CMAKE_CURRENT_LIST_DIR}/screens/main_screen_gen.c
  ${CMAKE_CURRENT_LIST_DIR}/ePTest_gen.c
  ${CMAKE_CURRENT_LIST_DIR}/ePTest.c)

整个项目的目录树如下

├── CMakeLists.txt
├── components
│   └── README.md
├── ePTest.c
├── ePTest_gen.c
├── ePTest_gen.h
├── ePTest.h
├── file_list_gen.cmake
├── fonts
│   └── README.md
├── globals.xml
├── images
│   └── README.md
├── preview-bin
│   ├── build.log
│   ├── lved-runtime.js
│   └── lved-runtime.wasm
├── preview-build
│   ├── CMakeCache.txt
│   ├── CMakeFiles
│   ├── cmake_install.cmake
│   ├── Makefile
│   └── project
├── project.xml
├── screens
│   ├── main_screen_gen.c
│   ├── main_screen_gen.h
│   ├── main_screen.xml
│   └── README.md
└── widgets
    └── README.md

与 Zephyr 应用整合 链接到标题

LVGL Pro 生成的代码可以直接整合到 Zephyr 应用中。导出的文件就是所有的。c 和。h 文件，如果你需要使用 CMake 进行编译也可以同时将 CMakeLists.txt 和file_list_gen.cmake件加入到 Zephyr 应用的源文件列表中。由于file_list_gen.cmake中是按照文件夹路径天津文件的，因此导出的。c 和。h 文件夹需要遵循原来的目录结果。另外我们也不希望导入到 Zephyr 中有其它不必要的文件，所以需要忽略。xml 和 LVGL Pro XML 的过程文件，可以得到如下要加入 Zephyr 构建的内容

.
├── CMakeLists.txt
├── ePTest.c
├── ePTest_gen.c
├── ePTest_gen.h
├── ePTest.h
├── file_list_gen.cmake
└── screens
    ├── main_screen_gen.c
    └── main_screen_gen.h

通过修改 Zephyr 的 CMakeLists.txt, 将以上内容纳入到 Zephyr 应用的源文件列表中，就可以构建了。

我做了一个开源的示例项目 https://github.com/lgl88911/LVGLXMLwZephyr，该项目可以自动完成上述步骤，其主要动作是如下两点：

• 加入定制化 west 命令，完成 LVGL XML 生成文件的自动导入
• 修改 CMakeList.txt，将 Zephyr 的编译选项注入，可以直接将导出的 LVGL 文件夹加入编译而不做任何修改

具体的使用方法可以参考项目的 README.md 文件，目前该项目支持模拟器 native_sim 和 esp32s3 实体硬件，效果分别如下

需要注意的是目前 Zephyr 项目中集成的 LVGL 版本是 9.3.0 而 LVGL Pro XML Editor 导出的 lvgl 代码是基于 9.4.0。因此目前 LVGL Pro XML Editor 导出的 lvgl 代码可能和一部分不能用，需要等 Zephyr 项目中集成的 LVGL 版本升级到 9.4.0 后才能全面使用。