当前位置: 首页 > news >正文

【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,【条】的周围将出现一个黑色的轮廓ÿ

http://www.lryc.cn/news/192815.html

相关文章:

  • 【单片机】19-TFT彩屏
  • 高质量!推荐一些免费自学网站
  • Linux之open/close/read/write/lseek记录
  • 3D调研-摄像头
  • 光耦合器继电器与传统继电器:哪种最适合您的项目?
  • 分享关于职场心态
  • OK3568 UBUNTU 安装使用I2C-TOOLS
  • mysql面试题53:一个6亿的表a,一个3亿的表b,通过外间tid关联,你如何最快的查询出满足条件的第50000到第50200中的这200条数据记录
  • Docker服务更新与发现
  • 【2023集创赛】安谋科技杯二等奖作品: 智能体感游戏机
  • 如何使用前端包管理器(如npm、Yarn)?
  • Codeforces Round 903 (Div. 3) C(矩形旋转之后对应的坐标)
  • 月薪过万的Java面试
  • html进阶语法
  • 博客系统(java,MySQL,HTML)
  • Android Studio SDKGradleJDK等工具的正确使用
  • 利用Python提取将Excel/PDF文件数据
  • 纯 CSS 实现瀑布流布局的方法
  • 输入法显示到语言栏_状态栏
  • [samba]同一个文件夹,分不同权限管理
  • 项目整合管理
  • 基于RuoYi-Flowable-Plus的若依ruoyi-nbcio支持本地图片上传与回显的功能实现(一)
  • 2023年建筑电工(建筑特殊工种)证考试题库及建筑电工(建筑特殊工种)试题解析
  • Puppeteer实现上下滚动、打开新Tab、用户数据保存(三)
  • ArduPilot开源飞控之AP_InertialNav
  • DataX工具部署与使用(PostgreSQL to Oracle)
  • 【PyTorch2 之027】在 PyTorch 中的R-CNN、Fast R-CNN和 Faster R-CNN
  • C++学习——C++函数的编译、成员函数的调用、this指针详解
  • Pulsar Manager和dashboard部署和启用认证
  • K8S环境搭建