SquareLine的使用

THEDI2025-08-292025-08-30

SquareLine的使用

软件介绍

SequareLine Studio 是由 LVGL 官方推出的嵌入式 UI 设计工具，专注于为嵌入式设备（如 MCU、Linux 网关、智能手表等）提供高效的可视化界面开发方案。

支持 C 语言和 Python 语言。

对于个人用户，是免费的，不过限制了单个工程组件使用个数和页面个数（不够就直接多创几个工程）

官方例程使用

SquareLine官方有一些例程Example，我们可以打开学习他是怎么进行绘制的，以便于我们自己进行绘制

深入学习可以参考官方Example+LVGL官方文档+AI的方式学习

工程创建

选择Create 选择LVGL版本，分辨率，像素格式，主题等

进去后主页面如下：

基础控件使用

如何添加控件

左侧是对应的控件，使用时直接拖动到页面上即可

右边可以就可以对控件的名称、属性、样式进行修改了

如何使用自定义字体

首先下载一个你喜欢的字体.ttf/.otf格式的，将文件放到项目下的assets文件夹，然后就可以访问该素材了

然后到我们创建的项目中，右边选择Font：

Fontname：通常以字体+大小形式规范字体命名
Select font asset：选择刚刚的.ttf文件
Font size：选择合适的字体大小
Bpp：选bpp4最佳
- bpp决定了字体点阵中每个像素的灰度级数量，越大显示越好，bpp4代表每个像素4位，16个灰度级
Symbols：输入你要用的字体，只有指定出的字体才会生成对应的.c文件部分，才能正常显示

然后点击CREATE之后，我们在下面就能看到创建的字符，可以对其进行修改

在各个控件中的style就可以选择对应的字体了

如何使用图片

把需要的图片复制到工程文件夹的assets文件夹中即可，然后就可以把图片组件拖到想要的父对象上了，例如screen或者panel等。

如何使用自定义图标字体iconfont

使用Unicode编码对应字符显示iconfont

图标字体实际上是一种字体，每个字符代表一个图标（矢量图形）。借助字体图标，我们可以如同操作文字一样操作字体图标，空间占用远小于图片，但是缺点就是只能是单色。

同样也是在工程文件夹的assets文件中添加，这里描述一下大概过程：

1.首先进入阿里巴巴iconfont下载素材，例如搜索bilibili图标，然后添加入库

2.然后后点击添加至项目（方便管理，方便后续再次添加icon），当然你如果icon少的画直接下载代码即可

3.然后进入我的项目，选择Unicode，点击下载到本地

4.将下载的压缩包的iconfont.ttf导入到assets文件夹中，然后与上面添加字体一样，添加font

5.与创建字体font不同的是，iconfont不能打印，只能在Range中设置(unicode)，生成哪些icon

6.在组件中使用，需要把icon对应的unicode转换为字符，然后复制到text中。

转换网站：unicode转换网站链接

7.导出代码，移植生成的图标字体文件到keil工程

注意：在keil中代码使用了图标字体时，由于keil对于编码的处理问题，移植文件后编译时会报错： missing closing quote

解决方法：在keil的Options for Target ‘Flash’ -> C/C++ -> Misc Controls

添加--locale=english就能解决

使用转义字符显示iconfont

对于上面的第一种方法，有些时候使用在线网站把icon对应的unicode转换为字符，然后复制到label的text中，在SquareLine或模拟器中能显示，但实际烧录到MCU后显示不出来图标字体，此时我们就可以换一种方式，直接使用转义字符输出UTF-8 字节序列(前提是在SquareLine中生成了对应的iconfont.c文件)

对应的图标字体对应的UTF-8字节序列的.c文件定义

对应UTF-8字节编码为

这里就没有使用转换得到的字符了(因为显示不出来)，而是使用转移字符获得UTF-8字节序列，然后这样就能成功显示了

LVGL自带图标字体

lv_symbol_def.h头文件定义中的Unicode ID of the symbol 如下：

使用这些图标字体的话需要到lv_conf中启用MONTSERRAT字体8~48，然后对应进行设置即可

将对应Label显示图标字体，使用lvgl的montserrat_24字体

事件与回调函数

在SquareLine中也能设置事件和回调函数，例如button按下的事件，触发相关函数，但是不推荐，因为导出的相关代码的比较乱，建议自己按照LVGL的手册写。最好只SquareLine生成一些组件的创建和初始化的代码

我们来试一下给button按下加入一个事件吧，即按下button就让slider的数值加10

首先创建slider，然后选中button，添加事件为按下事件，回调函数为增加slider的值

在SquareLine运行

点击运行按键就可以了

SquareLine代码移植

导出代码

我们绘制完成后，导出代码到指定目录

得到的目录结构如图所示：

ui.c/ui.h

作用：UI主入口文件，ui_init负责整个UI的初始化、销毁，以及各页面的初始化调用。

我们通常在其中对整个页面进行初始化，加载我们的首页面

ui_helpers.c/ui_helpers.h

作用：SquareLine自动生成的UI操作辅助函数，统一封装了LVGL的各种控件属性设置、动画处理、通用操作等，方便用代码批量和高效地控制UI。

主要内容如下：

属性设置类函数
- _ui_bar_set_property()、_ui_basic_set_property()、_ui_label_set_property()
  
  等：
  
  用于统一设置bar、基本对象、label等控件的属性（如数值、坐标、宽高、文本等）。
  - 例如：_ui_bar_set_property(bar_obj, _UI_BAR_PROPERTY_VALUE, 50); 就等价于 lv_bar_set_value(bar_obj, 50, LV_ANIM_OFF);
动画回调/获取类函数
- _ui_anim_callback_set_x(), _ui_anim_callback_get_x()等：
  用于动画系统回调（如移动、缩放、透明度、图片帧动画）。
其他辅助操作
- _ui_screen_change()：切换屏幕并初始化目标页面。
- _ui_flag_modify()/_ui_state_modify()：统一增删LVGL对象的flag或state（如隐藏、禁用等）。
- _ui_arc_increment()/_ui_slider_increment()：控件数值增减并发事件。
- _ui_textarea_move_cursor()：简化文本框光标移动。
文本显示相关
- _ui_arc_set_text_value()/_ui_slider_set_text_value()：把arc/slider的数值拼成带前缀/后缀的字符串显示在label上。
动画数据结构
- ui_anim_user_data_t：动画回调用的用户数据结构，便于传递动画目标与参数。