lvgl6.1.2控件介绍

lvgl6.1.2控件介绍
lvgl6.1.2控件介绍
1.圆弧(arc)
arc 控件的结构⾮常简单，⼀个可以控制⾓度和厚度的圆弧。

我们可以利⽤该控件做加载等待或者其他⼯作。

⾓度应该在 0-360 度范围内。

弧的宽度和⾼度是相同的。

2.进度条(bar)
bar 控件的构造⾮常简单，主要有两部分：⼀个固定的背景；⼀个可以调节的指⽰器。

bar 控件多⽤来显⽰进度等信息。

3.按钮(button)
按钮作为⼀个通⽤的输⼊输出控件，在 UI 中有⼤量的使⽤。

按钮通常是⼀个简单的矩形，在按下或者释放时有不同的状态。

需要注意的是，LittlevGL 的按钮不像其他 GUI ⼀样可以设置⽂本，⽽需要⽤户添加 label 作为⽂本显⽰。

4.按钮阵列(button matrix)
button matrix 控件就是 button 的资源简化、布局扩展版本，他更易于按钮矩阵的布局，⽽且矩阵内每个按钮的资源消耗跟少，有了 button matrix，我们需要创建⼀个九宫格的键盘变得⾮常简单。

但是由于资源简化，button matrix也有很多限制，⽐如，button matrix控件内置的label 没有接⼝修改其样式。

5.⽇历(calendar)
calendar 是⼀个经典的⽇历控件，可以显⽰⽇期。

能够突出显⽰当前⽇期，突出显⽰任何⾃定义的⽇期，可以选择⽇期等。

选中的⽇期会进⾏突出显⽰，也可以⼿动设置⽇期进⾏⾼亮显⽰。

⽇期使⽤⼀个 lv_calendar_date_t 结构体进⾏保存，包含了年⽉⽇。

设置和获取⽇期都使⽤这个结构体变量。

6.画布(canvas)
canvas 画布是⼀个很⾃由的⼀块绘制区域，⽤户可以在上⾯绘制任何内容，可以将控件绘制在上⾯，也可以在上⾯进⾏ 2D 绘图，例如矩形，圆等图形。

7.复选框(checkbox)
checkbox控件⽤于选择/⾮选某⼀个项⽬，他的⼯作机制相当于⼀个使能了toggle的btn，⽽且从源码中也可以看出，checkbox控件就是基于button进⾏构建的，在 button的基础上重绘了背景，使能了toggle，增加了label⽂本等。

checkbox控件跟switch控件的⼯作机制相似，都是⽤于开关或选择。

8.图表(chart)
chart 控件包含了表格背景以及数据显⽰，数据显⽰包括点、线、柱状、区域显⽰等可选。

9.容器(container)
cont 控件可以为⼦对象提供⼀个容器，可以设置其布局，其本质上是具有某些特殊功能的基本对象。

10.下拉列表(drop-down list)
下拉列表多⽤于选择，从多个选项中选择某⼀项。

默认情况下，下拉列表处于关闭状态，控件内仅显⽰当前选择的项⽬。

可以通过点击它使它展开，他将显⽰所有的选项，⽤户可以选择某⼀个新的选项。

11.仪表盘(gauge)
gauge 控件是带有刻度和标签的仪表。

可以⽤于数据值的图形化显⽰，显⽰速度、温湿度或者其他数值。

12.图像(image)
图像可以是存储位图本⾝和⼀些元数据的⽂件或变量。

13.图像按钮(image button)
image button与简单的button对象⾮常相似。

唯⼀的区别是，它在每个状态中显⽰⽤户定义的图像，⽽不是绘制⼀个按钮。

14.键盘(keyboard)
LittlevGL 为我们提供了⼀个虚拟键盘的控件，可以实现⽂本和数组以及符号的输⼊。

kb 键盘控件是基于 btnm 控件进⾏构建的，具有预定义的按键映射和其他功能，可以实现虚拟键盘来编写⽂本。

键盘有两种模式可⽤：LV_KB_MODE_TEXT 显⽰字母、数字和符号；
LV_KB_MODE_NUM 显⽰数字和简单符号。

15.⽂本(label)
label 是显⽰⽂本的基本控件，也是LittlevGL中最常⽤的控件，很多控件（⽐如 button）默认没有内置⽂本，需要我们创建label为⼦对象并添加上去。

16.LED(LED)
led 控件⾮常简单，就是⼀个具有 led 形状的基础控件，通过控制其颜⾊，阴影从⽽实现模拟 LED 开关的功能。

17.线条(line)
line 线条控件可以在⼀组点中绘制直线。

18.列表(list)
list 控件简单分解就是⼀个背景页⾯加上顺序排列的按钮组成，按钮⾥⾯可以包含⼀个图标和⽂本，当然，按钮的布局并不是固定的，库也允许⽤户重新定义按钮的布局。

按钮在添加后如果总⼤⼩超过 list 控件⼤⼩，可以上下滚动。

19.表盘(line meter)
line meter控件包含了⼀系列径向线绘制成的刻度。

20.消息提⽰框(message box)
message box控件经常⽤于信息提⽰，操作选择等场合，他可以弹出⼀个提⽰框，引导⽤户进⾏操作。

message box 控件是基于 container 控件构建，在上⾯增加了 label ⽂本和 button matrix按钮矩阵，组成了⼀个完整的消息提⽰框。

21.页⾯(page)
page 控件包含⼀个背景和⼀个可滚动的容器，将⼦对象添加到可滚动容器后，可以触摸滚动显⽰⼦对象。

22.预加载(preload)
预加载控件在各种 UI 系统中⾮常常见，它可⽤于等待某⼀个事件到达或者等待资源加载。

LittlevGL 的 preload 控件是基于 arc 弧形控件进⾏构建的，在其基础上增加了与加载相关的操作接⼝。

preload 控件的构成是⼀个封闭的弧形背景，⼀个颜⾊不同的弧形进⾏旋转。

23.滚动轴(roller)
roller 控件在智能⼿机的时间设置中很常见，他可以上下滚动在多个选项中选择某⼀个选项。

roller 的原型是 drop-down list。

24.滑块(slider)
slider 控件可以通过滑动滑块来设置某⼀个值，它包含⼀个固定的背景和⼀个可以滑动的滑块。

可以设置为垂直滑动或者⽔平滑动。

25.旋钮框(spinbox)
spinbox 控件包含⼀个⽂本输⼊区以及⼀个数字⽂本，可以通过按键或者函数增加或减少数字，可以⽤作特殊的数字输⼊。

遗憾的是。

LittlevGL 没有为我们提供可以修改 spinbox 的值的 button。

26.开关(switch)
switch 控件可⽤于打开/关闭某个事物，在动作上像是⼀个使能了 toggle 的 button 控件，从外观和源码可以看出来是⼀个 slider 滑块控件的衍⽣控件。

27.表格(table)
LittlevGL 为我们提供了⼀个具有表格最基础内容的 table 控件，由⾏、列以及⽂本构成。

提供了基本的单元格操作，合并、对齐等。

28.表视图(tableview)
tableview控件在移动设备中⾮常常见，例如很多⼿机APP底部的页⾯切换，就是 tableview 控件的⼯作机制类似。

tableview 可以⽤于切换多个页⾯，每⼀个页⾯可以提供⼀个 page 对象，我们可以在这个 page 对象上创建我们内容。

顶部或者底部会有⼀个默认是按钮的导航区。

29.⽂字输⼊(text area)
text area ⽂字区域，它提供⼀个⽂本输⼊框，可以跟 keyboard键盘控件绑定进⾏⽂字输⼊。

text area控件是由page控件和label 控件构
成，page提供输⼊框，label提供⽂本的展⽰。

因此它也继承了很多page的属性。

30.平铺视图(tile view)
tile view控件可以实现多个页⾯的切换显⽰，同 tableview 类似却也有很多不同的功能。

tile view 提供多个页⾯的⽹格类型的排列，可以通过上下左右滑动进⾏页⾯切换。

如果每个页⾯都是屏幕⼤⼩，就像是智能⼿表上的上下或者左右切换页⾯的效果。

31.窗⼝(window)
LittlevGL 的 window 控件同 PC ⼀样，有标题栏、主页⾯、关闭按钮等内容。

window控件也是⽐较常⽤的⼀种控件。

window控件的页⾯部分就是⼀个page控件，所以也有page控件的某些属性。