一.问题的引入我们使用纯代码编写LVGL界面的方式比较麻烦所以LVGL社区和第三方公司给LVGL开发出一些配套的UI设计工具比如说squareLineStudio,允许用户以所见即所得的方式创建界面布局然后导出为LVGL代码。本文主要介绍squareLineStudio软件的操作方式。squareLineStudio二.squareLineStudio介绍SquareLine Studio是一款专业的Ul设计软件,它与LVGLLight and Versatile Graphics Library,轻量级通用图形库紧密集成。LVGL是一个轻量化的、开源的、在嵌入式系统中广泛使用的图形库它提供了一套丰富的控件和组件使得在资源受限的设备上创建高端的图形界面成为可能。SquareLineStudio具有直观的拖放界面用户可以通过拖放组件来设计用户界面无需编写复杂的代码。它支持多种组件和布局并允许用户自定义样式、动画和行为。此外SquareLineStudio也提供了丰富的模板供用户选择用户可以根据需求快速创建各类设计项目如海报、邀请函等。除了UI设计功能SquareLineStudio还具备二维制图、三维建模和参数化设计的能力。用户可以轻松创建各种建筑图纸如平面图、立面图、剖面图等;也可以构建精确的三维模型以展示建筑空间和结构;同时通过参数化设计用户可以快速调整建筑模型的尺寸和形状实现灵活的设计变更。在SquareLineStudio中用户还可以添加各种设计元素如文本、图片、形状、图表等并可以从图库中选择现成的设计元素。在编辑过程中用户可以通过调整设计元素的大小、颜色、字体等属性进行个性化编辑。完成设计后用户还可以预览整体效果并导出为图片或PDF格式保存到本地。不过目前该软件只能支持30天试用而且免费版的使用有诸多限制所以需要开发复杂的界面还需要进行付费购买。三.下载安装1.下载点击SquareLine Studio - Design and build UIs with ease进行下载2.如何使用squareLineStudio对于如何使用该软件最好的方式是查看官网文档 SquareLine Studio 1.6.1 Documentation | SquareLine Studio四. 创建工程安装完成之后可以看到如图画面点击创建工程不过为了加快工程构建颜色深度Color depth 选择16bit即可创建出来之后可以看到如图界面五.操作使用1.软件布局介绍2.设置工程导出路径我们使用该软件的目的就是为了导出UI设计器生成界面的C文件所以要先进行设置工程导出的存储位置以及导出的C文件包含的头文件3.添加PNG图像此时可以看到添加成功这些图像可以作为界面的背景图片 或者 控件的背景图片4.导出C文件【文件夹】components文件夹通常这个文件夹用于存放自定义组件的相关代码这些组件是在SquareLine Studio中设计并自定义的例如某些特殊的按钮样式、图表或其他复合控件。如果项目中包含了自定义组件那么它们的实现代码将会在这个文件夹下。fonts文件夹存放字体资源包括已转换为LVGL可读格式的字体文件可能有预编译后的二进制字体数据文件或者是原始的字体文件以及相关的加载和注册代码。images文件夹包含项目中使用的图像资源如图标、背景图片等。这些图像经过处理后通常是转换成C语言数组形式的二进制数据可以直接被嵌入到应用程序中并在LVGL中显示。screens文件夹存储每个屏幕或页面的布局和组件信息。每个屏幕对应一个或多个C文件其中包含了屏幕的初始化代码即定义并创建UI界面上所有控件的代码。【c文件】ui.c和ui.h:u.c是主要的UI实现文件它包含了所有屏幕的初始化函数以及可能的全局变量声明和初始化。通过调用这些函数来实例化和连接UI界面的所有元素。ui.h则是对应的头文件包含了对外公开的函数声明和常量定义以便在主程序或其他模块中引用和调用UI初始化及交互函数。ui_events.c和ui_events.h:这些文件通常包含了对UI组件事件处理的代码如按钮按下、滑动事件、输入框文本变化等。ui_events.c实现具体的事件回调函数而ui_events.h 则是对外部可见的事件处理函数声明。ui_helpers.c和ui_helpers.h:这些文件用于存放辅助函数用于简化UI组件的创建、更新和管理或者是封装了一些通用的LVGL对象操作逻辑。这些函数有助于提高代码的可读性和复用性。总结来说SquareLine Studio导出的文件集合是为了方便用户直接将设计的Ul界面整合到嵌入式系统项目中涵盖了所需的全部资源文件和实现代码使得开发者能够快速地将设计成果部署到目标平台上运行。六.将导出的C文件合并到ARM-LVGL项目导出的C文件要进行简单修改最终合并到LVGL项目中执行1.SquareLine工程中要设置2.导出C文件导出之后可以在LVGL工程下看到 已经包含了 squareLine 软件导出的所有C文件3.修改LVGL工程中的Makefile文件现在我们将整个squareLine软件导出的文件 放入了LVGL工程中所以需要在Makefile文件中指定导出的C源文件和对应的头文件4.在main.c函数中添加头文件和直接调用 导出的C文件的函数 ui_init()5.编译工程最后编译可以了