【LVGL】SquareLine Studio入门基础操作

1.SquareLine Studio基础

   在这篇文章中将介绍SquareLine Studio的基础操作、解释如何加载一个项目、布局结构。
   启动软件后,可以加载之前的项目、创建项目、加载一个示例。
在这里插入图片描述
   这里以打开示例audio_mixer为例,可以双击该项目打开或者选中该项目点击右下角的【创建】按钮。
在这里插入图片描述

平移视图:按住鼠标中键;
移动屏幕上的小部件:鼠标左键单击选中,可以通过边框上的控制点来控制其大小。
右击屏幕可以显示小部件列表;

在这里插入图片描述
   SquareLine Studio主要有三个面板,小部件、层次结构和检查器。移动父小部件时,子小部件也会移动。在检查器面板中会显示所选小部件的参数,可以改变其位置、大小、对其方式及自定义样式和事件等。

2.SquareLine Studio创建小部件

   本节将介绍如何创建一个新项目、将小部件添加到屏幕、将图像资源添加到项目中。
   创建项目时,可以查看板子描述、填写项目介绍、设置项目名称、存放位置、分辨率等信息。
在这里插入图片描述
   点击【创建】后,第一个屏幕将自动添加到屏幕。
在这里插入图片描述
   点击【按钮】小部件,屏幕中显示蓝色按钮,在“属性”面板中会显示该小部件信息,可以修改其名字、大小、位置(默认为居中对齐),对齐方式有两种,像素/百分比。
在这里插入图片描述
   点击【标签】,生成的文本框默认是和按钮同级,将“标签”层级拖拽至“按钮”层级中,移动“按钮”“标签”也将跟着运动。
在这里插入图片描述

3.SquareLine Studio创建样式

   在本小节中,将介绍样式是什么,以及他们是如何工作的,在SquareLine Studio应用了一个主题来设置所有小部件的默认样式,这些默认值可以通过每个屏幕和小部件上的独特样式进行覆盖。
   新创建的项目中只有一个屏幕,并且默认被选中,【属性】面板中,在【样式设置】部分找到屏幕的样式。小部件的每个部分都可以在不同的状态下进行分别样式设置,你可以在状态下拉列表中,选择要更改的状态,默认情况下为“默认状态”,指的是未按下、未聚焦、未选中的状态。
在这里插入图片描述

  给屏幕添加一个渐变背景,在样式的主要部分中选择【背景】;勾选【背景颜色】、【背景渐变色】、【梯度方向】;【梯度方向】选择“VER”垂直方向,在【背景颜色】和【背景渐变色】中选择颜色,可以使用颜色选择器、或混合颜色选择。
在这里插入图片描述
  点击小部件面板中的【条】,将其宽度设置为70%、高度设置为30像素。对于【条】小部件来说,样式设置部分有两个部分,“样式”部分和“指示器”,可以为【条】的“背景”和“指示器”设置样式,
在这里插入图片描述
  在样式设置中,勾选【背景颜色】,【条】的颜色将变为白色,可以随意更改为任何颜色;勾选【背景半径】,并设置为2,勾选【轮廓宽度】,设置宽度为2,【条】的周围将出现一个黑色的轮廓;勾选【阴影宽度】,并设置为50。
在这里插入图片描述
  在“指示器”设置样式中,勾选【背景颜色】,将渐变方向设置为HOR水平,为背景和渐变设置两种不同的颜色,将背景半径设置为4,通过调制【条】的值参数,指示器的宽度将发生变化。
在这里插入图片描述

4.SquareLine Studio创建事件和响应动作

  本小节中将介绍事件和响应动作,以及他们是如何工作的、改变小部件的状态,并通过单击切换屏幕。
  创建一个新项目,在之前的基础上改变屏幕的背景颜色,并添加【按钮】,在【属性】面板中修改【按钮】的高度宽度都为100、背景半径为50,这将生成一个直径为100的圆形按钮。勾选【背景颜色】、【背景颜色渐变】、【梯度方向】。
在这里插入图片描述
  打开按下状态,现在我们的面板小部件处于按下状态,在【属性】的样式部分中,在状态下拉列表中选择按下,更改背景颜色、添加阴影选择与圆的颜色相同的颜色,将阴影宽度设置为50,然后将状态重置为默认状态,点击“▶”播放按钮,可以快速测试用户界面,而无需构建项目,再次点击播放按钮退出播放模式。
在这里插入图片描述
  向小部件添加事件,通过点击按钮跳转到另一个屏幕,首先向项目添加一个新屏幕,将其背景颜色改为其他颜色,选中第一个屏幕的圆形按钮,点击【添加事件】,可以通过此方式向每个小部件添加事件,添加名字、触发方式为释放(释放鼠标按钮时事件将开始),动作为切换屏幕,在模式中可以选择动画的类型,在其下面可以选择动画的时间和延迟,可以向事件添加多个动作。一切设置完成后,可以点击播放按钮或按下Ctrl+空格来进行测试,在按钮上按住鼠标按钮然后释放,屏幕将进行切换。
在这里插入图片描述

5.SquareLine Studio创建动画

  本小节将介绍如何创建动画,以及他们的工作原理。
  创建一个新项目,在屏幕上创建一个“按钮”部件,将【对齐】设置为底部中部,将y位置设置为-30。在屏幕上添加一个“面板”部件,将其宽度和高度设置为50px,为其设置背景颜色,背景半径设置为50。
  创建名为“Boll Bouncing”的动画,即时复选框决定是否在延迟之前或之后应用起始值,如果启用了即时复选框,起始值将在延迟之前应用起始值。将起始值设置为0,结束值设置为50,将时间设置为500ms,选择动画特性为第二个图标。设置另一个动画,起始值设为50,结束值为0,取消勾选【相对】以设置绝对坐标,对于延迟时间设置为500ms,因此它将在前一个属性动画之后播放,因为前一个动画长度为500ms,将动画长度设置为400ms,将特性设置为中间。可以点击动画面板中的“▶”播放按钮进行测试。
在这里插入图片描述
  选择按钮为其添加一个事件,输入一个名称,选择“播放动画”动作,并点击【添加动作】按钮,从动画下拉列表中选择创建的动画,并选择圆圈部件作为目标。用屏幕的“▶”按钮进行测试。
在这里插入图片描述

6.SquareLine Studio导出项目

  在本小节中将介绍如何使用SquareLine Studio创建项目,并导入工程。
  打开Smart_Gadget示例程序,点击“▶”按钮播放示例进行测试。
在这里插入图片描述
  【文件】->【项目设置】->【板子属性】根据自身开发板进行设置,这里我有的开发板时ESP系列的《小安派AiPi-Eye-S1》->【宽度】为240,高度为320->【应用更改】。【导出】->【导出UI文件】/【创建模板项目】。
  具体应用需要与硬件结合,这里不做演示。

7.SquareLine Studio导出到现有工程中

  如果SquareLine Studio不支持某个开发板,您只需要导出独立于平台的ui文件,您可以将这些文件视为手写的基于lvgl的ui代码的替代品,唯一的区别是这些文件是根据您SquareLine Studio中创建的ui自动生成的。
  首先根据现有硬件创建lvgl和所有必须驱动程序的工作项目,在工程中创建ui文件夹,在SquareLine Studio中选择【导出】->【导出UI文件】->选择工程ui文件夹所在地址。

8.SquareLine Studio添加自定义开发板

  在本小节中将介绍SquareLine Studio中支持任意自定义开发板,我们称之为Open Board Platform(OBP),简单来说,这意味着您可以创建一个模板项目和一个相邻的scripture文件,将他们复制到SquareLine Studio的文件夹中,该开发板将出现在SquareLine Studio的开发板列表中,并且您将能够为其导出项目。
  首先我们需要一个项目作为起点,这里以STM32F429-disco开发板为例,文件保存在Github上,Github超链接,将该工程下载下来,lvgl和lv_demo文件夹需要另下载。这是一个CubeIDE项目,需要确保该工程可以正常工作。
在这里插入图片描述
  在SquareLine Studio官方手册,OBP文件有如下架构,在boards文件夹中,可以有子文件夹,该子文件夹为开发板名称,一个给定的开发板需要一个zip文件、一个slb文件和一个png文件。
在这里插入图片描述
  我们可以参考SquareLine Studio现有的开发板进行参考,找到SquareLine Studio安装的位置,进入boards文件夹,在这里可以看到一些厂商的文件夹。
在这里插入图片描述
  我们以Espressif开发板作为示例,这里有png、slb、zip文件,在zip文件的顶层,应该有一个名为_ui_project_name_的文件夹,里面包含模板项目本身以及所有的驱动程序、初始化和main.c文件,在zip文件中,还应该有一个用于ui代码的文件夹,因此在我们的项目中也创建一个名为ui的文件夹,其名称和路径并不重要,因为我们稍后可以进行配置。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  现在为SquareLine Studio创建一个新的文件夹,将我们的项目复制到这个新文件夹中,并进行一些修改,稍后我们将对该文件夹进行压缩,首先将文件夹重命名为_ui_project_name__,现在删除一些我们不需要的文件夹,例如github、debug、lvgl文件夹。lvgl将在导出项目时,由SquareLine Studio自动添加。
  接下来在main.c中进行一些修改,我们不需要lvgl的示例代码,而是包含ui.h文件,ui.h将在我们创建的ui文件夹中导出,替换加在lvgl示例的代码,初始化导出的ui。当SquareLine Studio导出项目时,它可以搜索并替换一些文本,使用项目和ui的实际值来替换这些文本,我们将这些可以替换的文件成为text,在这个项目中我们只使用了ui project name标签。CubeIDE将项目名称存储到project文件中,使用文本编辑器打开它,并将当前名称替换为该标签,还向ui文件夹中添加一个README文件,其唯一目的是确保在压缩过程中,不会丢失空文件夹。最后将项目文件夹压缩,我们的SquareLine Studio模板项目就准备好了。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  接下来添加一个slb文件,slb代表SquareLine Board,这是一个JSON文件,描述了项目的一些参数,在SquareLine Studio官方文档中有一个示例slb文件,我们将使用它作为起点,更改项目的分组、更改标题、添加一些关键词、设置分辨率,设置lvgl应如何包括、设置应替换标签的文件、设置ui应导出的ui文件夹,最后可以为该开发板设置一个url和一些描述。
在这里插入图片描述
在这里插入图片描述

  作为最后一步添加一张封面图片,确保所有三个文件和文件夹的名称相同,返回到SquareLine Studio的Board文件夹,将我们的新开发板文件夹复制到ST文件夹,启动SquareLine Studio我们将在ST分组中看到我们自定义的开发板,在这里我们可以检查参数,打开一个与开发板分辨率匹配的示例,可以通过“▶”按钮进行播放,打开【文件】->【项目设置】->将项目的目标板,设置成我们的新开发板,并从导出菜单中选择创建模板项目,浏览到一个位置以存储项目,并查看结果。文件夹的名称根据项目名称命名,我们有一个lvgl文件夹,但是ui文件夹还是空的,我们需要将ui文件作为一个单独的步骤进行导出,这样您就可以确保更新ui不会破坏整个项目。
在这里插入图片描述

9.SquareLine Studio强大布局管理器(类似安卓设计理念)

  如果您想要均匀排列小部件,那么最好的方法是使用布局管理器,在着一小节中,将介绍如何使用弹性布局有效地设置小部件的位置。
  从SquareLine Studio1.2版本开始,可以在小部件上找到布局选项,通过这个选项可以使小部件的子项得到良好且均匀的排列,无论是垂直还是水平。如果启用了布局,您就无法手动设置小部件的位置,在属性面板的布局组中,可以找到弹性布局,选择它后,相关选项将出现。
在这里插入图片描述
  默认情况下方向设置为行row,我们向屏幕添加一些按钮,可以看到按钮相邻放置,您可以启用换行以自动换行,当按钮的形状发生改变时,他们的位置会根据布局设置进行更新。
在这里插入图片描述
  【主方向对齐】属性用于设置主方向(水平方向)的定位规则,对于行布局来说,默认设置为起始start,因此按钮相邻放置,您可以将其设置为终点end或居中center,以使按钮均匀分布在整个屏幕宽度上。交叉方向线属性设置小部件在垂直方向 上的位置,对于行布局来说即垂直方向上,使用这个属性,您可以在同一轨道上设置小部件的对齐方式,轨道设置调整轨道即行的分布方式,在这种情况下,启用反向选项,最后的像不见将按照相反的顺序放置,以最后一个小部件为起点,按钮指尖的间距可以通过复元素的列和行填充样式属性进行调整。
在这里插入图片描述
  还可以将此项的大小设置为过充剩余的轨道空间,为此选择一个按钮,并将其宽度单位设置为fr自由单位,fr代表相对自由空间的使用比例,例如如果只有一个宽度为1法郎的子项,并将其宽度设置为1法郎,它将占有所有的自由空间。
在这里插入图片描述
  如果有两个宽度为1法郎的子项,他们将均分自由空间的50%,但是如果我将第二个按钮的宽度更改为2fr,它将占用自由空间的60%,而第一个按钮将占33%。
在这里插入图片描述
  与布局相关的子项有多个标志,使用布局和弹性的新轨道标志,会强制已给定的子项,开始一个新的轨道。
在这里插入图片描述
  通过启用【忽略布局】标志,给定的子项将不受布局的影响,可以自由定位。【浮动】标志使子项固定在原位,不受滚动影响,并且忽略布局。弹性布局可以应用于多种情况,例如对列表元素进行排序,对标题上的图标进行排列或使小部件的大小可以相应改变,
在这里插入图片描述

10.SquareLine Studio组件使用

  如果您的ui设计元素在多个地方被重复使用,您应该使用组件,组件是一组小部件可以被保存并创建任意次数。典型的例子包括按钮标题或列表元素,如果您修改一个组件的示例,所有其他示例都会更新,这使得创建一致,且易于维护的ui设计变得更加容易。这本小节中,将介绍组件是什么,如何有效地使用它们。
  在SquareLine Studio中,您可以将任何一组小部件转换为组件,它包括一个复级小部件和所有的子项,创建的子项将显示在小部件面板的底部,您可以像其他小部件一样使用它们。这里以现有的小部件作为组件展示:
在这里插入图片描述

  现在我将向您展示如何创建一个列表,其中的元素是组件,我们将创建一个设置菜单,它可以显示或隐藏,让我们创建列表元素,为了简单起见,我们创建一个新的屏幕来创建和编辑我们的组件。在新屏幕中添加一个面板小部件并将其命名为item,将其宽度设置为100%,高度设置为60像素,将背景颜色的透明度设置为0,在面板上添加一个标签,将其对齐到左中并设置所需的字体,将标签的颜色设置为白色。
在这里插入图片描述
  我以及创建了一个开关组件,您可以在小部件面板上看到,组件也可以包含组件。当一个子组件被更新时,所有相关的组件也会被更新,将开关组件添加到面板上,并将其对齐到右中,为“面板”添加一个边框,它将作为列表元素指尖的分隔符,将边框的颜色、宽度和位置设置为底部。选择item小部件,并在“属性”面板顶部打开组件部分,并为组件命名,item名称对于组件也是可以的,点击【创建】按钮,组件将出现在小部件面板上,列表中小部件的颜色将从白色变为紫色,以便更容易区分组件和普通小部件。创建的组件将以单独的文件保存在项目文件夹中,这样您就可以轻松地在项目之间共享它们,只需将它们复制到另一个项目中,当您在编辑器中选择组件示例时,“属性”面板价格出现【编辑组件】和【分离组件】两个按钮,点击编辑组件按钮,您可以编辑已创建的组件,使用分离,您可以将组件转换回普通小组件,在“属性”面板中针对每个示例单独覆盖组件的任何参数。
在这里插入图片描述
  例如要复制一个列表项,并为其设置不同的大小,可以在“宽度、高度”字段前勾选复选框,为元素设置自定义大小。
在这里插入图片描述
  创建一个面板背景组件,设置其为弹性布局,在组件中添加列表项,自SquareLine Studio1.2起任何小部件都可以具有弹性布局,以自动排列此项。在设计文本和按键组合时,需要将开关起始位置放于中间位置,然后选择右中,否则可能出现进行弹性布局时,按键不动的情况。
在这里插入图片描述

  • 13
    点赞
  • 63
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

花落指尖❀

您的认可是小浪宝宝最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值