第四节 LVGL部件使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了第四节 LVGL部件使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

LVGL的编程思想

LVGL采用的是面向对象的编程思想，以抽象的类来实例化不同的对象（部件）。

第四节 LVGL部件使用

C语言中没有“类”的概念，LVGL以结构体的形式来实现“类”的思维。

第四节 LVGL部件使用

LVGL 基础对象

基础对象简介

基础对象（lv_obj）可以作为父对象，来创建其他对象，同时它也可作为部件使用。

第四节 LVGL部件使用

父和子对象的关系

第四节 LVGL部件使用

部件的基本属性

第四节 LVGL部件使用

大小（size）
位置（position）
对齐（alignment）
样式（styles）
事件（events）

大小

部件大小（size）相关参数

第四节 LVGL部件使用

部件大小（size）设置相关API函数：

设置宽度：lv_obj_set_width(obj, new_width);
设置高度：lv_obj_set_height(obj, new_height);
同时设置宽度、高度：lv_obj_set_size(obj, new_width, new_height);

位置（position）

第四节 LVGL部件使用

部件位置（position）设置相关API函数：

设置X轴坐标：lv_obj_set_x(obj, new_x);
设置Y轴坐标：lv_obj_set_y(obj, new_y);
同时设置X、Y轴坐标：lv_obj_set_pos(obj, new_x, new_y);

对齐（alignment）

第四节 LVGL部件使用

样式（styles）

样式用于设置部件的外观，以优化显示界面和实现用户交互。

第四节 LVGL部件使用
① 如何给部件添加样式？
② 什么时候样式会生效？
③ 有哪些样式属性可以设置？
④ 如何单独设置部件中某个部分的样式？

如何给部件添加样式？

添加普通样式：

static lv_style_t style; 									/* 定义样式变量 */
lv_style_init(&style); 									/* 初始化样式 */
lv_style_set_bg_color(&style, lv_color_hex(0xf4b183)); 				/* 设置背景颜色 */

lv_obj_t * obj = lv_obj_create(lv_scr_act()); 						/* 创建一个部件 */
lv_obj_add_style(obj, & style, LV_STATE_DEFAULT); 					/* 设置部件的样式 */

添加本地样式：

lv_obj_t * obj = lv_obj_create(lv_scr_act()); 						/* 创建一个部件 */
lv_obj_set_style_bg_color(obj, lv_color_hex(0xf4b183),LV_STATE_DEFAULT);	/* 设置部件的样式 */

什么时候样式会生效？

enum {

    LV_STATE_DEFAULT     	=  0x0000,		 /* 默认状态 */
    LV_STATE_CHECKED     	=  0x0001,		 /* 切换或选中状态 */
    LV_STATE_FOCUSED     	=  0x0002,		 /* 通过键盘、编码器聚焦或通过触摸板、鼠标单击 */
    LV_STATE_FOCUS_KEY   	=  0x0004,		 /* 通过键盘、编码器聚焦 */
    LV_STATE_EDITED      	=  0x0008,		 /* 由编码器编辑 */
    LV_STATE_HOVERED     	=  0x0010,		 /* 鼠标悬停（现在不支持）*/
    LV_STATE_PRESSED     	=  0x0020,		 /* 已按下 */
    LV_STATE_SCROLLED    	=  0x0040,		 /* 滚动状态 */
    LV_STATE_DISABLED    	=  0x0080,		 /* 禁用状态 */
    …
};

有哪些样式属性可以设置？

第四节 LVGL部件使用
如何单独设置部件中某个部分的样式？

第四节 LVGL部件使用

enum {

    LV_PART_MAIN		= 0x000000, 	 	/* 主体，像矩形一样的背景 */
    LV_PART_SCROLLBAR	= 0x010000, 	 	/* 滚动条 */
    LV_PART_INDICATOR	= 0x020000, 	 	/* 指示器，指示当前值 */
    LV_PART_KNOB		= 0x030000,	 	/* 手柄或旋钮，用于调整参数值 */
    LV_PART_SELECTED	= 0x040000, 	 	/* 选项框，指示当前选择的选项 */
    LV_PART_ITEMS		= 0x050000, 	 	/* 相似的元素，例如单元格 */
    LV_PART_TICKS		= 0x060000, 	 	/* 刻度 */
    LV_PART_CURSOR		= 0x070000, 	 	/* 光标 */
};

事件（events）

LVGL中，当发生用户感兴趣的事情时，可以触发回调事件，以执行相关的操作。

第四节 LVGL部件使用

不同的事件类型共用一个事件回调函数怎么处理？

static void event_cb( lv_event_t *e )
{
	lv_event_code_t   code = lv_event_get_code(e);		 /* 第一步：获取事件类型 */
	if ( code == LV_EVENT_CLICKED )				 /* 第二步：判断事件类型 */
	{
        		printf(“事件类型: 按下后释放\r\n”);	 		 /* 第三步：执行相应操作 */
	}
	else if ( code == LV_EVENT_LONG_PRESSED)
	{
        		printf(“事件类型:按下（长按）\r\n”);	
	}
}

不同的部件共用一个事件回调函数怎么处理？

static void event_cb( lv_event_t *e )
{
	lv_obj_t   *target = lv_event_get_target(e); 		 /* 第一步：获取触发事件的部件 */
	if ( target == parent_obj )				 /* 第二步：判断触发事件的部件 */
	{
        		printf(“父对象触发事件 \r\n”);	 		 /* 第三步：执行相应操作 */
	}
	else if ( target == child_obj )
	{
        		printf(“子对象触发事件 \r\n”);	
	}
}

LVGL部件使用

标签部件（lv_label）

在 LVGL 中，标签部件主要用于文本显示，例如标题、提示信息等。

标签部件组成部分：

主体（LV_PART_MAIN）
滚动条（LV_PART_SCROLLBAR）
选中的文本（LV_PART_SELECTED）

第四节 LVGL部件使用

① 如何创建标签部件以及设置文本？
② 如何改变文本的样式？
③ 当文本长度超过部件大小的时候怎么显示？

如何创建标签部件以及设置文本？

知识点1：创建标签部件

lv_obj_t *label = lv_label_create(parent);

知识点2：设置文本的3种方式

① 直接设置文本，存储文本的内存动态分配：lv_label_set_text( label, “hallo \n lvgl”);
② 文本不存储在动态内存，而是在指定的缓冲区中（慎用）：lv_label_set_text_static( label,“hallo” );
③ 格式化显示文本，类似printf ：lv_label_set_text_fmt( label, “Value: %d”, 50 );

如何改变文本的样式？

知识点1：设置文本样式

① 背景颜色：lv_obj_set_style_bg_color( label, lv_color_hex(0xffe1d4), LV_STATE_DEFAULT );

② 字体大小：lv_obj_set_style_text_font( label, &lv_font_montserrat_30, LV_STATE_DEFAULT );

③ 文本颜色：lv_obj_set_style_text_color( label, lv_color_hex(0xf7b37b), LV_STATE_DEFAULT );

知识点2：设置个别文本的字体颜色

lv_label_set_recolor( label, true ); /* 开启重新着色功能 */

lv_label_set_text( label, "hallo #ff0000 lvgl# " ); /* 单独设置颜色 */

当文本长度超过部件大小的时候怎么显示？

知识点1：

默认情况下，如果没有限定标签部件大小，那它的大小自动扩展为文本大小。

知识点2：长文本模式

lv_label_set_long_mode(label, LV_LABEL_LONG_…);

enum {
    LV_LABEL_LONG_WRAP,             		/* 默认模式, 如果部件大小已固定，超出的文本将被剪切 */
    LV_LABEL_LONG_DOT,              		/* 将 label 右下角的最后 3 个字符替换为点… */
    LV_LABEL_LONG_SCROLL,           		/* 来回滚动 */
    LV_LABEL_LONG_SCROLL_CIRCULAR,  	/* 循环滚动 */
    LV_LABEL_LONG_CLIP,             		/* 直接剪切掉部件外面的文本部分 */
};

按钮部件（lv_btn）

在LVGL中，按钮部件与基础对象相比，没有新增任何功能。

按钮部件组成部分：

主体（LV_PART_MAIN）

第四节 LVGL部件使用

知识点1：创建按钮部件

lv_obj_t   *btn  = lv_btn_create( parent );

知识点2：设置样式

lv_obj_set_size( btn, 100, 50 );								    /* 大小 */	
lv_obj_set_align( btn, LV_ALIGN_CENTER );						    /* 对齐 */
lv_obj_set_style_bg_color( btn, lv_color_hex(0xffe1d4), LV_STATE_PRESSED );     /* 背景颜色 */

知识点3：添加事件

lv_obj_add_flag( btn, LV_OBJ_FLAG_CHECKABLE );					     /* 开启状态切换 */
lv_obj_add_event_cb( btn, event_cb, LV_EVENT_VALUE_CHANGED,NULL );	    /* 添加事件 */

开关部件（ lv_switch）

开关部件常用于控制某个功能的开启和关闭，它可以直接显示被控对象的状态。

开关部件组成部分：

主体（LV_PART_MAIN）
手柄（LV_PART_KNOB）
指示器（LV_PART_INDICATOR）
知识点1：创建开关部件

lv_obj_t   *switch1  = lv_switch_create( parent );

知识点2：添加、清除开关状态

lv_obj_add_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);		/* 添加状态：默认打开且不可修改 */
lv_obj_clear_state(switch1, LV_STATE_CHECKED | LV_STATE_DISABLED);	/* 清除开关的状态 */

知识点3：获取（判断）开关状态

lv_obj_has_state(switch1, LV_STATE_CHECKED)					 /* 返回值：bool类型，开 :1；关: 0 */

复选框部件(lv_checkbox)

复选框部件常用于选择某个内容的开启和关闭，可以理解为自带标签的开关。

复选框部件组成部分：

主体（LV_PART_MAIN）
勾选框（LV_PART_INDICATOR）
知识点1：创建复选框部件

lv_obj_t   *checkbox  = lv_checkbox_create (parent );

知识点2：文本设置

lv_checkbox_set_text( checkbox, "remember the password" );			/* 设置文本内容 */
lv_obj_set_style_pad_column( checkbox, 20, LV_STATE_DEFAULT ); 		/* 设置文本和勾选框的间距 */

进度条部件(lv_bar)

进度条部件常用于显示当前任务的完成进度。

进度条部件组成部分：

主体(LV_PART_MAIN）
指示器(LV_PART_INDICATOR)

第四节 LVGL部件使用

知识点1：创建进度条部件

lv_obj_t   *bar  = lv_bar_create ( parent );

知识点2：设置大小、当前值、范围值

lv_obj_set_size( bar, 400, 20 );							/* 设置大小 */
lv_bar_set_value( bar, 50, LV_ANIM_ON );					/* 设置当前值 */
lv_bar_set_range( bar, -100, 100 );						/* 设置范围值 */

知识点3：设置动画时间

lv_obj_set_style_anim_time( bar, 500, LV_STATE_DEFAULT );		/* 动画设置必须放在当前值设置之前 */

拓展知识点：设置模式、起始值

lv_bar_set_mode( bar, LV_BAR_MODE_RANGE );			/* 设置模式 */
lv_bar_set_start_value( bar, -50, LV_ANIM_OFF );			/* 设置起始值 */

enum {
    LV_BAR_MODE_NORMAL,			/* 默认模式 */
    LV_BAR_MODE_SYMMETRICAL,		/* 从零值绘制到当前值（当前值可以小于0） */
    LV_BAR_MODE_RANGE			/* 允许设置起始值，但起始值必须小于当前值 */
};

注意：在V8.2版本的LVGL中，默认模式也允许设置起始值，但是后续的版本可能会修改。

进度条使用注意事项（V8.2版本）：

当进度条高度大于宽度时，其方向变为垂直。
动画时间设置需要放在当前值设置之前，否则看不到动画效果。
动画时间指的是旧值刷新到新值的绘图时间，并不是现实中当前值变化所需的时间。

加载器部件 (lv_spinner)

加载器部件常用于提示当前任务正在加载。

加载器部件组成部分：

主体(LV_PART_MAIN）
指示器(LV_PART_INDICATOR)
手柄(LV_PART_KNOB)

第四节 LVGL部件使用

知识点1：创建加载器部件

lv_obj_t   *spinner  = lv_spinner_create( parent, spin_time, arc_length );

知识点2：设置圆弧颜色

lv_obj_set_style_arc_color( spinner, lv_color_hex(0x4a9f00), LV_PART_MAIN ); 	   /* 设置主体圆弧颜色 */
lv_obj_set_style_arc_color( spinner, lv_color_hex(0x83bd55), LV_PART_INDICATOR );   /* 设置指示器圆弧颜色 */

知识点3：设置圆弧宽度

lv_obj_set_style_arc_width( spinner, 30, LV_PART_MAIN );					    /* 设置主体圆弧宽度 */
lv_obj_set_style_arc_width( spinner, 30, LV_PART_INDICATOR );				    /* 设置指示器圆弧宽度 */

LED部件 (lv_led)

LED部件常用于指示控制对象的状态。

主体（LV_PART_MAIN）

第四节 LVGL部件使用

知识点1：创建LED部件

lv_obj_t   *led = lv_led_create( parent );

知识点2：设置LED颜色、亮度

lv_led_set_color( led, lv_color_hex(0xff0000) );	   		/* 设置LED颜色 */
lv_led_set_brightness( led, 0 );						/* 设置LED亮度，范围0~255*/

知识点3：设置LED状态

lv_led_on( led );				    				/* 打开LED（设置亮度为255）*/
lv_led_off( led );		    						/* 关闭LED */
lv_led_toggle( led );							/* 翻转LED状态 */

列表部件(lv_list)

列表部件常用于多选一的场景，默认会展现多个选项。

列表部件组成部分：

主体(LV_PART_MAIN）
滚动条(LV_PART_SCROLLBAR)

第四节 LVGL部件使用

知识点1：创建列表部件

lv_obj_t   *list = lv_list_create( parent );

知识点2：添加列表文本

lv_list_add_text( list, “Settings" );

知识点3：添加列表按钮

lv_obj_t  *btn= lv_list_add_btn( list, LV_SYMBOL_WIFI, “WLAN");

知识点4：获取列表按钮文本

lv_list_get_btn_text( list, list_btn );

下拉列表部件(lv_dropdown)

下拉列表部件常用于多选一的场景，点击后可展现多个选项。

下拉列表部件组成部分：

按钮（BUTTON）
列表（LIST)

第四节 LVGL部件使用

知识点1：创建下拉列表部件

lv_obj_t   *dd = lv_dropdown_create( parent );

知识点2：设置选项内容

lv_dropdown_set_options( dd, "a\nb\nc\nd");	   		/* 设置选项 */
lv_dropdown_set_options_static( dd, "a\nb\nc\nd ");		/* 设置选项 （静态）*/
lv_dropdown_add_option( dd, "e", 4);					/* 添加选项，索引从0开始 */

知识点3：设置当前所选项

lv_dropdown_set_selected( dd, 1);					/* 注意：索引从0开始 */

知识点4：获取选项内容

lv_dropdown_get_selected( dd);					/* 获取索引 */

char buf[10];
lv_dropdown_get_selected_str( dd, buf, sizeof(buf));		/* 获取选项文本 */

知识点5：设置方向和图标

lv_dropdown_set_dir(dd, LV_DIR_RIGHT);				/* 设置列表展开方向 */
lv_dropdown_set_symbol(dd, LV_SYMBOL_RIGHT);			/* 设置图标 */

滚轮部件(lv_roller)

滚轮部件常用于多选一的场景，它以滚轮的形式来展现多个选项。

滚轮部件组成部分：

主体（LV_PART_MAIN）
选项框（LV_PART_SELECTED)

第四节 LVGL部件使用

知识点1：创建滚轮部件

lv_obj_t   *roller= lv_roller_create( parent );

知识点2：设置选项间隔

lv_obj_set_style_text_line_space(roller, 30, LV_STATE_DEFAULT);

知识点3：设置选项内容、滚动模式

lv_roller_set_options(roller, “a\nb\nc\nd”, LV_ROLLER_MODE_NORMAL); 		/* 正常模式 */

知识点4：设置当前所选项

lv_roller_set_selected(roller, 3, LV_ANIM_ON);

知识点5：设置可见行数

lv_roller_set_visible_row_count(roller, 2);

知识点6：获取选项内容

lv_roller_get_selected(roller);								/* 获取索引 */

char buf[10];
lv_roller_get_selected_str(roller, buf, sizeof(buf));					/* 获取选项文本 */

滑块部件 (lv_slider)

滑块部件常用于调节某个参数的值，它以直线滑动的形式来修改数值。

滑块部件组成部分：

主体(LV_PART_MAIN）
指示器(LV_PART_INDICATOR)
旋钮(LV_PART_KNOB)

第四节 LVGL部件使用

知识点1：创建滑块部件

lv_obj_t   *slider = lv_slider_create( parent );

知识点2：设置大小、当前值、范围值

lv_obj_set_size(slider, 20, 200);						/* 高度>宽度时，滑块为纵向 */
lv_slider_set_value(slider, 50, LV_ANIM_OFF);				/* 设置当前值 */
lv_slider_set_range(slider, -100, 100);					/* 设置范围值 */

知识点3：获取当前值

lv_slider_get_value(slider);

知识点4：模式设置

lv_slider_set_mode(slider, LV_SLIDER_MODE_...);

知识点5：设置、获取左值

lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);					/* 设置左值 */
lv_slider_get_left_value(slider);								/* 获取左值 */

圆弧部件(lv_arc)

圆弧部件以弧形滑动的形式来调节、显示某个参数的值。

圆弧部件组成部分：

背景弧(LV_PART_MAIN）
前景弧(LV_PART_INDICATOR)
旋钮(LV_PART_KNOB)

第四节 LVGL部件使用

知识点1：创建圆弧部件

lv_obj_t   *arc = lv_arc_create( parent );

知识点2：设置当前值、范围值

lv_arc_set_value(arc, 80);							/* 设置当前值（需要在范围值之内）*/
lv_arc_set_range(arc, 0, 200);						/* 设置范围值 */

知识点3：设置圆弧角度

lv_arc_set_angles(arc, 135, 270);						/* 设置前景弧角度 */
lv_arc_set_bg_angles(arc, 135, 45);					/* 设置背景弧角度 */

知识点4：设置旋转角度

lv_arc_set_rotation(arc, 180);

知识点5：获取当前值

lv_arc_get_value(arc);

知识点6：设置模式、圆弧绘制速率

lv_arc_set_mode(arc, LV_ARC_MODE_REVERSE);				/* 设置模式 */
lv_arc_set_change_rate(arc, 90);							/* 绘制速率：90°/秒 */

线条部件(lv_line)

线条部件能够在一组坐标点之间依次绘制直线。

线条部件组成部分：

主体(LV_PART_MAIN）

第四节 LVGL部件使用

知识点1：创建线条部件

lv_obj_t   *line = lv_line_create( parent );

知识点2：设置线条坐标点

static lv_point_t  line_points[] = { {15, 5}, {25, 20}, {5, 20}, {15, 5} };
lv_line_set_points(line, line_points, 4);

知识点3：设置线条样式

lv_obj_set_style_line_width(line, 8, LV_PART_MAIN);           	/* 设置宽度 */
lv_obj_set_style_line_rounded(line, true, LV_PART_MAIN);	   	/* 设置圆角 */

知识点4：设置y轴反转

lv_line_set_y_invert(line, true);

图片部件(lv_img)

图片部件可用于图片显示、功能界面优化、背景优化等。

图片部件组成部分：

主体(LV_PART_MAIN）

第四节 LVGL部件使用

知识点1：创建图片部件

lv_obj_t  *img = lv_img_create( parent );

知识点2：设置图片源

LV_IMG_DECLARE(img_bird);				/* 声明图片 */
lv_img_set_src(img, &img_bird);			/* 设置图片源 */

知识点3：设置图片偏移

lv_img_set_offset_x(img, 100);				/* x轴偏移100 */
lv_img_set_offset_y(img, 20); 				/* y轴偏移20 */

知识点4：图片重新着色

lv_obj_set_style_img_recolor(img, lv_color_hex(0xffe1d2), LV_PART_MAIN); 
lv_obj_set_style_img_recolor_opa(img, 150, LV_PART_MAIN);

知识点5：设置图片缩放、旋转

lv_img_set_zoom(img, 512);		/* 放大2倍 */
lv_img_set_angle(img, 900);		/* 顺时针方向旋转90° */

知识点6：设置中心点

lv_obj_update_layout(img);		/* 更新图片布局信息 */
lv_img_set_pivot(img, 0, 0);		/* 设置中心点 */

色环部件(lv_colorwheel)

在UI设计中，色环部件一般用作颜色选择器。

色环部件组成部分：

主体(LV_PART_MAIN）
旋钮(LV_PART_KNOB)

第四节 LVGL部件使用

知识点1：创建色环部件

lv_obj_t  *cw = lv_colorwheel_create( parent, knob_recolor );

知识点2：设置当前选中颜色

lv_colorwheel_set_rgb(cw, lv_color_hex(0xff0000));

知识点3：获取当前选中颜色

lv_colorwheel_get_rgb(cw);

知识点4：设置色环模式

lv_colorwheel_set_mode(cw, LV_COLORWHEEL_MODE_HUE/SATURATION/VALUE);	    /* 色相、饱和度、明度 */
lv_colorwheel_set_mode_fixed(cw, true);							    /* 固定色环模式 */

第四节 LVGL部件使用

按钮矩阵部件(lv_btnmatrix)

按钮矩阵部件可以在不同的行和列中显示多个轻量级按钮。

按钮矩阵部件组成部分：

主体(LV_PART_MAIN）
按钮(LV_PART_ITEMS)

第四节 LVGL部件使用

知识点1：创建按钮矩阵部件

lv_obj_t  *btnm = lv_btnmatrix_create(parent);

知识点2：设置按钮数量、文本

static const char *map[] = { "btn1", "\n", "btn2", "btn3", "" };	/* 定义按钮数组，最后一个元素必须为空 */
lv_btnmatrix_set_map(btnm, map);					/* 设置按钮 */

知识点3：设置按钮相对宽度

lv_btnmatrix_set_btn_width(btnm, id, width);			/* 索引 (id) 从0开始，宽度1~7 ( 默认为1 ) */

知识点4：获取按钮索引、文本

lv_btnmatrix_get_selected_btn(btnm);					/* 获取索引 */
lv_btnmatrix_get_btn_text(btnm, id);					/* 获取文本 */

知识点5：设置、清除按钮属性

lv_btnmatrix_set_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...);		 /* 设置单个按钮属性 */
lv_btnmatrix_clear_btn_ctrl(btnm, id, LV_BTNMATRIX_CTRL_...);		 /* 清除单个按钮属性 */
lv_btnmatrix_set_btn_ctrl_all(btnm, LV_BTNMATRIX_CTRL_...);	 	 /* 设置所有按钮属性 */

enum {
    LV_BTNMATRIX_CTRL_HIDDEN, 						/* 隐藏 */
    LV_BTNMATRIX_CTRL_DISABLED,						/* 失能 */
    LV_BTNMATRIX_CTRL_CHECKABLE, 					/* 允许状态切换 */
    LV_BTNMATRIX_CTRL_RECOLOR, 						/* 允许文本重新着色 */
};

知识点6：设置单次选中属性

lv_btnmatrix_set_one_checked(btnm, true);					  /* 注意：需要先设置允许状态切换属性 */

文本区域部件(lv_textarea)

文本区域部件即文本输入框，用户可以在其中输入文本内容。

文本区域部件组成部分：

主体(LV_PART_MAIN）
滚动条(LV_PART_SCROLLBAR)
所选文本(LV_PART_SELECTED）
光标(LV_PART_CURSOR)
占位符(TEXTAREA_PLACEHOLDER)

第四节 LVGL部件使用

知识点1：创建文本区域部件

lv_obj_t  *ta = lv_textarea_create(parent);

知识点2：添加文本

lv_textarea_add_char(ta, 'A');					/* 添加一个字符到当前光标处 */
lv_textarea_add_text(ta, "BCDEF"); 				/* 添加字符串到当前光标处 */
lv_obj_t *keyboard = lv_keyboard_create(lv_scr_act());	/* 创建键盘部件 */
lv_keyboard_set_textarea(keyboard, ta);			/* 关联键盘和文本区域部件 */

知识点3：设置光标位置

lv_textarea_set_cursor_pos(ta, 0);				/* 0：最左侧， LV_TEXTAREA_CURSOR_LAST：最右侧 */

知识点4：删除文本

lv_textarea_del_char(ta);							/* 删除光标左侧的一个字符 */
lv_textarea_del_char_forward(ta);					/* 删除光标右侧的一个字符 */

知识点5：设置模式

lv_textarea_set_one_line(ta, true);					/* 单行模式 */
lv_textarea_set_password_mode(ta, true);				/* 密码模式（隐藏输入的内容） */
lv_textarea_set_password_show_time(ta, 100);			/* 密码显示时间 */

知识点6：限制字符输入

lv_textarea_set_accepted_chars(ta,"0123456789");	 		/* 限制接收的字符 */
lv_textarea_set_max_length(ta,6);			 		/* 限制字符长度 */

知识点7：设置占位符

lv_textarea_set_placeholder_text(ta, "password");	 		/* 提示输入密码 */

知识点8：获取文本

const char *txt = lv_textarea_get_text(ta);				 /* 获取文本框文本 */

知识点9：比对文本内容

strcmp(const char *s1,const char *s2);					/* 当s1=s2时，返回0 */

键盘部件(lv_keyboard)

键盘部件可用于输入文本内容，其本质上就是一个特殊的按钮矩阵。

键盘部件组成部分：

主体(LV_PART_MAIN）
按钮(LV_PART_ITEMS)

第四节 LVGL部件使用

知识点1：创建键盘部件

lv_obj_t  *kb = lv_keyboard_create(parent);

知识点2：关联文本框

lv_obj_t *ta = lv_textarea_create(lv_scr_act());				/* 创建文本区域部件 */
lv_keyboard_set_textarea(kb, ta);						/* 关联键盘和文本区域部件 */

知识点3：设置按键弹窗

lv_keyboard_set_popovers(kb, true);						/* 允许按键弹窗提示 */

知识点4：设置键盘模式

lv_keyboard_set_mode(kb, LV_KEYBOARD_MODE_NUMBER);		/* 数字键盘模式 */

图片按钮部件(lv_imgbtn)

图片按钮部件类似于按钮部件，不同的是，用户可以在其中设置图片。

图片按钮部件组成部分：

主体(LV_PART_MAIN）

第四节 LVGL部件使用

知识点1：创建图片按钮部件

lv_obj_t  *imgbtn = lv_imgbtn_create(parent);

知识点2：设置图片源、按钮大小

lv_imgbtn_set_src(imgbtn, LV_IMGBTN_STATE_..., src_left, src_mid, src_right);		/* 设置某个状态的图片源 */
lv_obj_set_size(imgbtn, 64 * 3, 64);								/* 设置图片按钮大小 */

知识点3：设置按钮状态

lv_imgbtn_set_state(imgbtn, LV_IMGBTN_STATE_PRESSED);				/* 设置按下状态 */

拓展知识点：如何显示带有透明度通道的图片？

① 准备一张带有透明度通道的图片

② 官方图片转换工具中，色彩格式选择：CF_TRUE_COLOR_ALPHA

③ 声明图片并调用即可

选项卡部件(lv_tabview)

选项卡部件可以实现多页面切换，用户可以在不同的页面中添加内容。

选项卡部件组成部分：

主体（lv_obj）
按钮（lv_btnmatrix)

第四节 LVGL部件使用

选项卡部件(lv_tabview)

知识点1：创建选项卡部件

lv_obj_t  *tabview =  lv_tabview_create(parent, LV_DIR_..., tab_size);

知识点2：添加选项卡

lv_obj_t *tab1 = lv_tabview_add_tab(tabview, "Tab 1"); 
lv_obj_t *tab2 = lv_tabview_add_tab(tabview, "Tab 2");

知识点3：设置当前选中的选项卡

lv_tabview_set_act(tabview, 1, LV_ANIM_OFF); 					/* 索引从0开始 */

平铺视图部件(lv_tileview)

平铺视图部件可以实现不同方向的页面切换，用户可以页面中添加内容。

平铺视图部件组成部分：

主体(LV_PART_MAIN）
滚动条(LV_PART_SCROLLBAR)

第四节 LVGL部件使用

知识点1：创建平铺视图部件

lv_obj_t  *tileview = lv_tileview_create( parent );

知识点2：添加页面

lv_obj_t *tile1 = lv_tileview_add_tile( tileview, 0, 0, LV_DIR_RIGHT );
lv_obj_t *tile2 = lv_tileview_add_tile( tileview, 1, 0, LV_DIR_LEFT );

知识点3：设置当前显示页面

lv_obj_update_layout( tileview );							/* 更新参数 */
lv_obj_set_tile( tileview, tile2, LV_ANIM_OFF );					/* 根据页面对象设置 */
lv_obj_set_tile_id( tileview, 1, 0, LV_ANIM_OFF );				     	/* 根据页面行列设置 */

窗口部件(lv_win)

窗口部件可以作为一个容器，展现不同功能的页面。

窗口部件组成部分：

头部（Header）
主体（Content）

第四节 LVGL部件使用

知识点1：创建窗口部件

lv_obj_t *win = lv_win_create(parent, header_height);

知识点2：添加标题、按钮

lv_obj_t *title = lv_win_add_title(win, "Setting");
lv_obj_t *btn = lv_win_add_btn(win, LV_SYMBOL_CLOSE, 20);

知识点3：添加主体内容

lv_obj_t *content = lv_win_get_content(win); 				/* 获取主体 */
lv_obj_t *label = lv_label_create(content);					/* 添加内容 */

消息框部件(lv_msgbox)

消息框部件可以实现弹窗提示，常用于消息通知、确定操作等。

消息框部件组成部分：

主体（obj）
标题（title）
关闭按钮（close_btn）
内容（content）
按钮矩阵（btnmatrix）

第四节 LVGL部件使用

知识点1：创建消息框部件

static const char *btns[] = { "Continue", "Close", "" };
lv_obj_t *msgbox = lv_msgbox_create( lv_scr_act(), "Notice", "Do you want to continue?", btns, true );

知识点2：关闭消息框

lv_msgbox_close(msgbox);

知识点3：获取按钮索引、文本

lv_obj_t *target = lv_event_get_current_target(e);					/* 获取当前触发源 */
lv_msgbox_get_active_btn(target);							/* 获取按钮索引 */
lv_msgbox_get_active_btn_text(target);						/* 获取按钮文本 */

微调器部件(lv_spinbox)

微调器部件本质上就是一个数字文本，常用于精确调节某个参数的值。

微调器部件组成部分：

主体(LV_PART_MAIN）
光标(LV_PART_CURSOR)

第四节 LVGL部件使用

知识点1：创建微调器部件

lv_obj_t *spinbox = lv_spinbox_create(parent);

知识点2：数值递增、递减

lv_spinbox_increment(spinbox);								/* 递增 */
lv_spinbox_decrement(spinbox);							/* 递减 */

知识点3：设置步进值、范围值

lv_spinbox_set_step(spinbox, 200);							/* 设置步进值，默认为1*/
lv_spinbox_set_range(spinbox, -1000, 1000);						/* 设置范围值，默认±99999*/

知识点4：设置当前值

lv_spinbox_set_value(spinbox, 400);

知识点5：设置数字格式、光标位置

lv_spinbox_set_digit_format(spinbox, 4, 2); 						/* 设置数字位数、小数点位置 */
lv_spinbox_set_pos(spinbox, 3);								/* 设置光标位置 */

知识点6：获取当前值

lv_spinbox_get_value(spinbox);								 /* 返回值为整数，而非小数

表格部件(lv_table)

表格部件由一个个单元格组成，它的单元格中只能存放文本形式的内容。

表格部件组成部分：文章来源地址https://www.toymoban.com/news/detail-455163.html

主体(LV_PART_MAIN）
单元格(LV_PART_ITEMS)
知识点1：创建表格部件

lv_obj_t *table = lv_table_create(parent);

知识点2：设置行数、列数

lv_table_set_row_cnt(table,2); 							/* 设置行数 */
lv_table_set_col_cnt(table,2); 							/* 设置列数 */
lv_table_set_col_width(table, 1, 200); 						/* 设置列的宽度 */

知识点3：设置单元格的内容

lv_table_set_cell_value(table, 0, 0, "123");	
lv_table_set_cell_value_fmt(table, 1, 0, "%d", 100 );				/* 格式化输入，类似printf */

到了这里，关于第四节 LVGL部件使用的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

第四节 LVGL部件使用

LVGL的编程思想

LVGL 基础对象

基础对象简介

父和子对象的关系

部件的基本属性

大小

位置（position）

对齐（alignment）

样式（styles）

事件（events）

LVGL部件使用

标签部件（lv_label）

按钮部件（lv_btn）

开关部件（ lv_switch）

复选框部件(lv_checkbox)

进度条部件(lv_bar)

加载器部件 (lv_spinner)

LED部件 (lv_led)

列表部件(lv_list)

下拉列表部件(lv_dropdown)

滚轮部件(lv_roller)

滑块部件 (lv_slider)

圆弧部件(lv_arc)

线条部件(lv_line)

图片部件(lv_img)

色环部件(lv_colorwheel)

按钮矩阵部件(lv_btnmatrix)

文本区域部件(lv_textarea)

键盘部件(lv_keyboard)

图片按钮部件(lv_imgbtn)

选项卡部件(lv_tabview)

选项卡部件(lv_tabview)

平铺视图部件(lv_tileview)

窗口部件(lv_win)

消息框部件(lv_msgbox)

微调器部件(lv_spinbox)

表格部件(lv_table)

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2