【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起任何小部件都可以具有弹性布局，以自动排列此项。在设计文本和按键组合时，需要将开关起始位置放于中间位置，然后选择右中，否则可能出现进行弹性布局时，按键不动的情况。