首页 > 综合 > 正文

单片机低代码交互UI制作 - LVGL+Squareline+Arduino平台学习记录（3）

2023-07-08 15:48:11来源：哔哩哔哩

Squareline的注册、安装、介绍等前期准备

Squareline没有中文，汉化有空研究下吧，不一定能成，本篇主要做了下英汉对照，参考着看。Squareline官网：（不挂梯子问题不大）

Squareline的试用版是根据设备来的，如果是未安装过的设备不注册账号也可以用30天。

注册

在主页上点这个，直接进注册页面的话链接：/sign-up

(资料图片仅供参考)

注册界面，邮箱实测QQ、163都能接收到验证邮件，没限制。

注册完成后会发送一封确认邮件，在邮箱确认完成后进入登录界面。

如下图点击确认界面与下图类似，如果还是发送邮件界面则回邮箱再点几次，直到提示验证成功。

下载软件在这，链接是：/downloads

支持WIN、Linux、MAC三类，按需选择，实测下载有点慢。

下载的压缩文件里就这一个玩意。

双击文件

等待跑条

完成

安装完成后双击打开，注意软件需要登录获取证书后才能离线运行。

进入后应该是下面两个图中的一个，也就是登录账号。

接下来就是项目管理界面，直接上图。

这里有个坑，分辨率和显示方向，分辨率需要根据你的屏幕来定，一般厂家对于宽高都有说明。但显示方向和TFT_eSPI有冲突，TFT_eSPI对于屏幕的宽高是固定的，也就是说屏幕厂家给的什么就是什么，可在Squareline里，调整屏幕方向就是在调整宽高。。。

醉了，不知道以后官方会不会改，目前处理方法是，调整好横屏、竖屏就行了，方不方向的不重要，填什么都可以，只要Squareline里的显示效果是你要的，后面代码里改TFT_eSPI的参数就可以了。

例程那一栏，看懂上面那两个图自然就会了。

主界面介绍，这些功能栏都是能拖的，可能会有些不一样，我这是拖过的。

项目树栏介绍

部件栏介绍

素材栏

输出/日志栏

动效栏

属性栏，这个比较多

1、名称

最上面是部件类型，这个是屏幕，部件上面还有个组件。Name这一行可以改名字，无法使用中文，错误文字（例如中文、特殊符号）无法键入。

2、布局

LVGL的布局和样式参考的是网页CSS那一套，而CSS作为网页的三大件之一，真的挺杂的，我想尽量把这些说的易懂一些，虽然我自己也不太懂。

FlexFlow直译弹性流，我更想称其为布局选项，这一栏有两个选项，No Layout - 无布局，Flex - 弹性布局。

请注意，这一栏的作用对象是它内部的部件（子级），而不是它自己。说到父子关系应该不难理解，下图红色线标识的两个Button按键就是父级Panel的子级，而黄色线标识的是同级。所以如果设置的是Panel这个部件，它的作用范围只有两个孩子Button，管不着它兄弟Image和它爹Screen。

No Layout - 无布局：应该比较好理解，部件通过X、Y坐标来确定自己的位置，可以相互重叠甚至跑出容器不显示或只显示一部分。如图所示，这是两个重叠的按钮和一张超出显示范围的图片。

Flex - 弹性布局：内部的部件自动排列，超出显示范围的只显示一部分，在一些网站上应该见过，拖动浏览器边框改变大小，网页上的显示会自动进行压缩间隔、换行等操作。如图，还是那些部件，弹性布局下就变成自动排列了。

但！在后面的Flags（标志）中有两个可以让子级解除布局限制的选项，1、IGNORE_LAYOUT（忽略布局），2、FLOATING（浮动）。这两个选项都是在子级上的，接上之前的例子，如果你在Panel上开启了其中任意一个，只会让Panel脱离它爹Screen的管控（注意是管控，而不是分家），Panel的两个孩子Button依然是受它管理的。

在选择无布局时是没有上图这一栏的，弹性布局毕竟涉及到一些自动化操作，不给点指引放飞自我的话效果绝对不是想要的那种。

FlexFlow。。。是的它又出现了，这一次它是代表着弹性布局方向来的，由于弹性布局是自动排列换行的，那么是横着排还是竖着排需要一个指示，Row（行）也就是横着来，Column（列）竖着排。

注意，即使同一行（/列）中，前一个部件比后一个部件高了很多，后面的部件也不会在同一行竖着排，如下图所示。

Wrap - 包裹，或者说自动换行。以上面布局方向为横向（行）来举例，横向排列的部件超过父级容器宽度时，No Wrap：不换行接着向后排，超出父级容器范围（显示区域）的就不显示；Wrap：换行，这个就好理解了，反正不管这个超出的容器在下一行会不会依然超出，直接给它新开一行就完了。

（至于超出父级显示区域的部分，想想滚动条就知道它并不是没有作用的了，LVGL真的很强大，不是画个框框圈圈那么简单）

No wrap - 不换行，下图。

Wrap - 换行，下图。

Reversed - 翻转，两个选项1、不翻转，2、翻转。效果就是子级的排列顺序是正着排还是反着排，没太想明白这一条的实际用途，难道是后面为了程序控制方便的吗？

两个选项的效果。

题外话，老外这些功能的词真的搞的脑袋疼。

Main - 主对齐。。。真特喵der，如果是横向排列，那么它就是水平对齐，如果是纵向排列，它就是竖直对齐。。。更特喵der了。

横向排列：