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控件的某些属性。