lvgl6.1.2控件介绍

1.圆弧(arc)

arc 控件的结构非常简单,一个可以控制角度和厚度的圆弧 。我们可以利用该控件做加载等待或者其他工作。角度应该在 0-360 度范围内。弧的宽度和高度是相同的。

lua 界面控件介绍_控件

lua 界面控件介绍_ide_02

2.进度条(bar)

bar 控件的构造非常简单,主要有两部分:一个固定的背景;一个可以调节的指示器。bar 控件多用来显示进度等信息。

lua 界面控件介绍_ide_03

3.按钮(button)

按钮作为一个通用的输入输出控件,在 UI 中有大量的使用。按钮通常是一个简单的矩形,在按下或者释放时有不同的状态。需要注意的是,LittlevGL 的按钮不像其他 GUI 一样可以设置文本,而需要用户添加 label 作为文本显示。

lua 界面控件介绍_lua 界面控件介绍_04

4.按钮阵列(button matrix)

button matrix 控件就是 button 的资源简化、布局扩展版本,他更易于按钮矩阵的布局,而且矩阵内每个按钮的资源消耗跟少,有了 button matrix,我们需要创建一个九宫格的键盘变得非常简单。但是由于资源简化,button matrix也有很多限制,比如,button matrix控件内置的 label 没有接口修改其样式。

lua 界面控件介绍_lua 界面控件介绍_05

5.日历(calendar)

calendar 是一个经典的日历控件,可以显示日期。能够突出显示当前日期,突出显示任何自定义的日期,可以选择日期等。选中的日期会进行突出显示,也可以手动设置日期进行高亮显示。

日期使用一个 lv_calendar_date_t 结构体进行保存,包含了年月日。设置和获取日期都使用这个结构体变量。

lua 界面控件介绍_ide_06

6.画布(canvas)

canvas 画布是一个很自由的一块绘制区域,用户可以在上面绘制任何内容,可以将控件绘制在上面,也可以在上面进行 2D 绘图,例如矩形,圆等图形。

lua 界面控件介绍_滑块_07

lua 界面控件介绍_控件_08

7.复选框(checkbox)

checkbox控件用于选择/非选某一个项目,他的工作机制相当于一个使能了toggle的btn,而且从源码中也可以看出,checkbox控件就是基于button进行构建的,在 button的基础上重绘了背景,使能了toggle,增加了label文本等。checkbox控件跟switch控件的工作机制相似,都是用于开关或选择。

lua 界面控件介绍_控件_09

8.图表(chart)

chart 控件包含了表格背景以及数据显示,数据显示包括点、线、柱状、区域显示等可选。

lua 界面控件介绍_ide_10

9.容器(container)

cont 控件可以为子对象提供一个容器,可以设置其布局,其本质上是具有某些特殊功能的基本对象。

 

lua 界面控件介绍_lua 界面控件介绍_11

10.下拉列表(drop-down list)

下拉列表多用于选择,从多个选项中选择某一项。默认情况下,下拉列表处于关闭状态,控件内仅显示当前选择的项目。可以通过点击它使它展开,他将显示所有的选项,用户可以选择某一个新的选项。

lua 界面控件介绍_lua 界面控件介绍_12

lua 界面控件介绍_滑块_13

11.仪表盘(gauge)

gauge 控件是带有刻度和标签的仪表。可以用于数据值的图形化显示,显示速度、温湿度或者其他数值。

lua 界面控件介绍_lua 界面控件介绍_14

12.图像(image)

图像可以是存储位图本身和一些元数据的文件或变量。

lua 界面控件介绍_lua 界面控件介绍_15

lua 界面控件介绍_控件_16

13.图像按钮(image button)

image button与简单的button对象非常相似。唯一的区别是,它在每个状态中显示用户定义的图像,而不是绘制一个按钮。

lua 界面控件介绍_lua 界面控件介绍_17

14.键盘(keyboard)

LittlevGL 为我们提供了一个虚拟键盘的控件,可以实现文本和数组以及符号的输入。kb 键盘控件是基于 btnm 控件进行构建的,具有预定义的按键映射和其他功能,可以实现虚拟键盘来编写文本。键盘有两种模式可用:LV_KB_MODE_TEXT 显示字母、数字和符号;LV_KB_MODE_NUM 显示数字和简单符号。

lua 界面控件介绍_ide_18

15.文本(label)

label 是显示文本的基本控件,也是LittlevGL中最常用的控件,很多控件(比如 button)默认没有内置文本,需要我们创建label为子对象并添加上去。

 

lua 界面控件介绍_滑块_19

lua 界面控件介绍_ide_20

lua 界面控件介绍_ide_21

16.LED(LED)

led 控件非常简单,就是一个具有 led 形状的基础控件,通过控制其颜色,阴影从而实现模拟 LED 开关的功能。

lua 界面控件介绍_控件_22

17.线条(line)

line 线条控件可以在一组点中绘制直线。

lua 界面控件介绍_滑块_23

18.列表(list)

list 控件简单分解就是一个背景页面加上顺序排列的按钮组成,按钮里面可以包含一个图标和文本,当然,按钮的布局并不是固定的,库也允许用户重新定义按钮的布局。按钮在添加后如果总大小超过 list 控件大小,可以上下滚动。

lua 界面控件介绍_ide_24

19.表盘(line meter)

line meter控件包含了一系列径向线绘制成的刻度。

lua 界面控件介绍_ide_25

20.消息提示框(message box)

message box控件 经常用于信息提示,操作选择等场合,他可以弹出一个提示框,引导用户进行操作。message box 控件是基于 container控件构建,在上面增加了 label 文本和 button matrix按钮矩阵,组成了一个完整的消息提示框。

lua 界面控件介绍_lua 界面控件介绍_26

lua 界面控件介绍_ide_27

21.页面(page)

page 控件包含一个背景和一个可滚动的容器,将子对象添加到可滚动容器后,可以触摸滚动显示子对象。

lua 界面控件介绍_ide_28

22.预加载(preload)

预加载控件在各种 UI 系统中非常常见,它可用于等待某一个事件到达或者等待资源加载。LittlevGL 的 preload 控件是基于 arc 弧形控件进行构建的,在其基础上增加了与加载相关的操作接口。preload 控件的构成是一个封闭的弧形背景,一个颜色不同的弧形进行旋转。

lua 界面控件介绍_lua 界面控件介绍_29

23.滚动轴(roller)

roller 控件在智能手机的时间设置中很常见,他可以上下滚动在多个选项中选择某一个选项。roller 的原型是 drop-down list。

lua 界面控件介绍_滑块_30

24.滑块(slider)

slider 控件可以通过滑动滑块来设置某一个值,它包含一个固定的背景和一个可以滑动的滑块。可以设置为垂直滑动或者水平滑动。

lua 界面控件介绍_lua 界面控件介绍_31

lua 界面控件介绍_lua 界面控件介绍_32

25.旋钮框(spinbox)

spinbox 控件包含一个文本输入区以及一个数字文本,可以通过按键或者函数增加或减少数字,可以用作特殊的数字输入。遗憾的是。LittlevGL 没有为我们提供可以修改 spinbox 的值的 button。

lua 界面控件介绍_控件_33

26.开关(switch)

switch 控件可用于打开/关闭某个事物,在动作上像是一个使能了 toggle 的 button 控件,从外观和源码可以看出来是一个 slider 滑块控件的衍生控件。

lua 界面控件介绍_lua 界面控件介绍_34

27.表格(table)

LittlevGL 为我们提供了一个具有表格最基础内容的 table 控件,由行、列以及文本构成。提供了基本的单元格操作,合并、对齐等。

lua 界面控件介绍_lua 界面控件介绍_35

28.表视图(tableview)

tableview控件在移动设备中非常常见,例如很多手机APP底部的页面切换,就是 tableview 控件的工作机制类似。tableview 可以用于切换多个页面,每一个页面可以提供一个 page 对象,我们可以在这个 page 对象上创建我们内容。顶部或者底部会有一个默认是按钮的导航区。

lua 界面控件介绍_ide_36

29.文字输入(text area)

text area 文字区域,它提供一个文本输入框,可以跟 keyboard键盘控件绑定进行文字输入。text area控件是由page控件和label 控件构成,page提供输入框,label提供文本的展示。因此它也继承了很多page的属性。

lua 界面控件介绍_ide_37

lua 界面控件介绍_滑块_38

30.平铺视图(tile view)

tile view控件可以实现多个页面的切换显示,同 tableview 类似却也有很多不同的功能。tile view 提供多个页面的网格类型的排列,可以通过上下左右滑动进行页面切换。如果每个页面都是屏幕大小,就像是智能手表上的上下或者左右切换页面的效果。

lua 界面控件介绍_控件_39

31.窗口(window)

LittlevGL 的 window 控件同 PC 一样,有标题栏、主页面、关闭按钮等内容。window控件也是比较常用的一种控件。window控件的页面部分就是一个page控件,所以也有page控件的某些属性。

lua 界面控件介绍_滑块_40