上海商城网站广告页面设计图片

视频教程请关注我b站：同学_好好学习，这里只是做相应的笔记文稿

从零上手GUI Guider学习LVGL——Buttton

前言：
首先我们为什么要学习LVGL设计工具呢？

1 降低开发难度

2 提高开发效率 所以我们需要学习一款合适的设计工具

在b站很少看到有讲gui guider的一些使用视频，这个教程是从零上手GUI Guider学习LVGL，我将讲述我在学习这款软件一些技巧，并分享lvgl知识，期间如果有错误，请及时指出！

1 准备工作

• 1 打开gui guider软件，并建立项目

• 2 用vscode打开项目

• 3 打开lvgl8.3版本内容（这里推荐百问网的网站）

 2 界面介绍

3 组件介绍——按键

1 Button

对于Button来说，我认为有以下内容来拼接：

• 1 一个矩形区域组件（包含基础的属性）

  • 1 Border（外框）

  • 2 Shadow（阴影）

  • 3 Background（背景）

• 2 Label（可以修改文本大小、样式和内容）

这是修改外框、阴影、背景以及文本属性的Button，可以更加直观的看出来：

接下来注重讲一下组件属性区的功能：   

• 1当前组件的主要信息，名字、位置、大小、以及相关标志位（如hidden，checked等）
•  2 Label属性设置
  

• 3 样式设置区
  

当前状态下会分不同情况，比如Button：

• 1 Default

• 2 Focused

• 3 Preseed

• 4 Checked

• 5 Disabled
  

如果我想做一个按下按钮，进行Buttton切换背景颜色，并锁定当前按下的状态：

• 1添加可以勾选的标志位
  

• 2 切换到勾选状态下的属性设计，设置不同背景颜色
  

• 3 显示效果如下：