[特殊字符] SquareLine Studio 1.5.3 全流程实战：《HosNFS-Cloud 挂号终端 —— 基于 LVGL 的嵌入式交互界面》系统完整设计记录

原创于 2025-09-19 09:40:45 发布 · 956 阅读

CC 4.0 BY-SA版权

文章标签：

在开发 基于 LVGL 8.3 的HosNFS-Cloud 挂号终端 —— 基于 LVGL 的嵌入式交互界面系统 时，我选择了 SquareLine Studio 1.5.3 作为主要 UI 设计工具。
这篇文章从安装、项目结构、关键控件、布局技巧、导出集成到真实项目实践，详细分享我在实际开发中遇到的细节与解决方案。

1️⃣ 为什么选择 SquareLine Studio

1.1 工具简介

定位：LVGL 官方推荐的可视化 UI 设计器
优点：
- 拖拽式编辑，直接生成 ui.c / ui.h 代码
- 所见即所得，支持多屏、多布局
- 与 LVGL 8.x 高度兼容

1.2 我的开发需求

我的项目分为两端：

上位机：录入患者数据（姓名、诊断号、ID）
下位机：通过 ID 查询并展示患者信息
目标屏幕分辨率 800×480，要求界面简洁、可滚动、可动态刷新。

选择理由：
SquareLine 1.5.3 不仅适配 LVGL 8.3.x，还能直接生成我需要的多屏、多 Panel 代码，极大节省开发时间。

2️⃣ 安装与环境准备

组件	版本/工具	说明
SquareLine Studio	1.5.3	核心设计工具
LVGL	8.3.11	嵌入式 GUI 库
编译环境	Linux Framebuffer / STM32	具体硬件平台
图片处理	Photopea/Photoshop	用于调整背景图片分辨率
显示屏	800×480 电容屏	与项目一致的分辨率

步骤：

从官方页面https://squareline.io/下载 1.5.3 版本。
安装后首次启动建议立即设置 Workspace 路径，方便后续导出文件集中管理。
确认 LVGL 版本与工具一致，否则导出的代码可能需要手动修改。

3️⃣ 新建与配置项目

3.1 项目初始化

New Project → 选择分辨率 800×480 → 颜色深度 16 bit → 旋转方向 0°。
资源文件夹：建议单独放在 assets/ 目录，方便后续编译。

⚠️ 小贴士：分辨率必须与目标屏幕一致，否则后期缩放会导致字体模糊或控件错位。

3.2 多屏设计

我创建了两个 Screen：
- Screen_Main：患者数据录入
- Screen_Query：下位机信息查询
通过 Button → Event → lv_event_clicked 跳转界面：
```
lv_scr_load(ui_Screen_Query);
```

4️⃣ 关键控件与属性详解

SquareLine 1.5.3 的控件丰富，但在项目中我主要用到以下几类，并且针对版本特性做了调优：

4.1 滚动 Panel（核心）

问题背景：
1.5.3 版本缺少现成的 List/Table，而我的下位机需要展示多条患者记录。

解决方案：

添加 Panel，在属性中勾选 Scrollable。
在 Layout 选项中选择 Column，让子项纵向排列。
设置 Pad 与 Gap：
- Pad 控制内边距（推荐上下左右 = 8 px）
- Gap 控制子项间距（推荐 5~10 px）

技巧：如果 Gap 选项找不到，它在 1.5.3 中被放在 Layout 子面板里，需要展开后才能看到。

动态添加子项示例（C 端代码）：

lv_obj_t *item = lv_label_create(ui_PanelPatientList);
lv_label_set_text_fmt(item, "Name:%s\nDiagnosis:%s", name, diag);

4.2 Label

用途：显示患者姓名、诊断号等文本
关键属性：
- Long Mode → Scroll Circular：文本超长时自动滚动
- Align → Center：居中显示

4.3 Button

用途：登录、界面跳转
样式：
- Radius → 20 px 圆角
- State → Pressed 颜色变化

4.4 Text Area

用途：输入 ID card 进行查询
属性：
- Password 模式：如果需要隐藏输入
- Placeholder Text：提示“请输入患者ID”

4.5 Image & 背景图

背景图设置：属性面板 → Background → Image
图片准备：在 Photopea 中裁剪到 800×480，避免拉伸失真。
颜色深度：与项目保持一致（16bit），减少内存占用。

5️⃣ 设计实战：患者信息管理系统

5.1 上位机

负责录入 Name、Diagnosis number、ID card。
在 PC 或 Linux 环境运行，数据存储到文件或数据库。

5.2 下位机

登录：用户输入 ID card。
数据展示：滚动 Panel 中动态生成 Label 显示 Name 与 Diagnosis number。

示例代码片段：

// 匹配 ID
if (check_id_in_file(input_id) == 0) {
    show_patient_data(input_id);
}

通过 SquareLine 导出的 ui_init()，我只需要在 C 代码中动态更新 Label 内容即可。

6️⃣ 代码导出与集成

SquareLine → Export → 生成 ui.c、ui.h、资源目录。

在 LVGL 工程中引入：

#include "ui.h"
void lv_user_init(void) {
    ui_init();
}

编译烧录后，界面即可运行。

7️⃣ 踩坑与经验分享

问题	解决方案
Gap 设置找不到	在 Layout 面板展开后才能看到
大图占用 Flash	使用 JPG 或 LVGL Image Converter 压缩
多语言需求	将文本外部化为资源表
滚动卡顿	降低图片分辨率、优化刷新率
版本兼容	确保 LVGL 8.3.x 与 1.5.3 配套

8️⃣ 进阶技巧

动画效果：
在 Button 或 Label 的 Style 中可添加渐变或淡入淡出。
动态刷新：
使用 lv_event_refresh 或自定义定时器实时更新患者数据。
主题统一：
自定义颜色表，保证上位机与下位机界面一致。

9️⃣ 总结

SquareLine Studio 1.5.3 极大简化了 LVGL UI 开发，Panel + Scrollable + 动态添加控件 完美替代了缺失的 List/Table。
在我的 HosNFS-Cloud 挂号终端 —— 基于 LVGL 的嵌入式交互界面系统项目中，通过合理设置 Gap、Pad、背景图分辨率以及与后端逻辑的结合，实现了从 界面设计 到 硬件部署 的全流程。