熟悉LVGL的大佬们肯定都听说过SquareLine Studio这款可视化UI设置工具，该工具最初与LVGL官方合作，但是2024年双方分道扬镳了，在分开的这一年里，LVGL推出了V9版本，SquareLine也没有闲着，推出了squareline vision这款在线的UI设计工具，该工具目前还是测试版，本文就抢先体验一下并分享一下使用感受
在线UI编辑器介绍 管理界面 注册部分就不再赘述，在https://squareline.io/里按照引导使用邮箱注册就好，进入到主界面显示如下
默认是深色背景，目前是V0.6版本 只有一个3D打印机的Demo，右下角是一些项目的配置，比如屏幕分辨率、LVGL版本等（目前只支持LVGL 9）
主设计界面
页面主要分为5个区域，顶部栏可以选择动画，控件等。从左侧依次分为页面（Screen)、 结构（hierarchy） 模拟器/编辑器 属性设置（Inspector），我们主要关注编辑区域
顶部操作栏
顶部栏从左到右依次为UI编辑/动画编辑切换按钮，增加页面按钮，Panel/Contain/Image按钮，文字按钮，常用组件按钮，撤回按钮，以及运行预览按钮
页面选择
编辑区域类似figma等主流UI设计工具，多个页面平铺，点击某个界面，左侧会显示页面的资源树，点击控件，资源树里也会对应高亮。
预览
点击预览按钮后，可以运行模拟器，显示效果还是非常赞的！
动画
选择页面->进入动画编辑页面->选择动画->点击Play就可以预览和调整动画效果，非常直观
代码生成
页面左上角点击Export UI Files即可生成对应LVGL代码
UI代码解析 代码结构 生成出的代码如下图所示，结构比较清晰，每个页面是一个单独的file
代码亮点
ui_helpers提供了很多接口便于页面操作，如页面切换
动画time line封装了一个统一操作的接口，避免重复代码
提供CMakeLists文件，便于项目代码管理
