icore4tlvgl_26 []

实验二十六：lv_roller滚轮列表

一、滚轮列表

滚轮列表允许您通过滚动简单地从多个选项中选择一个选项。滚轮列表的主要部分称为 LV_ROLLER_PART_BG 。它是一个矩形，并使用所有典型的背景属性。Roller标签的样式继承自背景的文本样式属性。要调整选项之间的间距，请使用 text_line_space 样式属性，该填充样式属性设置两侧的空间。

中间的选定选项可通过 LV_ROLLER_PART_SELECTED 虚拟小部件引用。除了典型的背景属性外，它还使用文本属性来更改所选区域中文本的外观。

二、设定选项

要为滚轮列表设置选项内容，可以通过函数 lv_roller_set_options(roller, options, LV_ROLLER_MODE_NORMAL/INFINITE) 实现，这些选项 options 作为字符串传递给滚轮列表，选项之间应用 \n 分隔，例如：“First\nSecond\nThird”。

其中 LV_ROLLER_MODE_NORMAL 为正常模式，向上最多滚动到第一个选项，向下最多滚动到最后一个选项。而LV_ROLLER_MODE_INIFINITE 则为循环模式，即最后一个选项下方是第一个选项，选项循环滚动。

用户也可以使用命令 lv_roller_set_selected(roller, id, LV_ANIM_ON/OFF) 手动选择一个选项，其中 id 是选项的索引。

void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                       /* 初始化lvgl2rtt */
 
	lv_obj_t * roller1 = lv_roller_create(lv_scr_act(), NULL);  /* 创建滚轮列表 */
	lv_obj_set_style_local_text_font(roller1, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &hei_16);                                                                  /* 设置字体 */
	lv_roller_set_options(roller1, " 星期一 \n" " 星期二 \n" " 星期三 \n" " 星期四 \n" " 星期五 \n" " 星期六 \n" " 星期七 ", LV_ROLLER_MODE_NORMAL);                 /* 设置选项 */
	lv_roller_set_visible_row_count(roller1, 4);                /* 设置显示行 */
	lv_obj_align(roller1, NULL, LV_ALIGN_CENTER, -100, 0);      /* 设置位置 */
 
  	lv_obj_t * roller2 = lv_roller_create(lv_scr_act(), NULL);  /* 创建滚轮列表 */
	lv_obj_set_style_local_text_font(roller2, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &hei_16);                                                                  /* 设置字体 */
	lv_roller_set_options(roller2, " 星期一 \n" " 星期二 \n" " 星期三 \n" " 星期四 \n" " 星期五 \n" " 星期六 \n" " 星期七 ", LV_ROLLER_MODE_INIFINITE);              /* 设置选项 */
	lv_roller_set_visible_row_count(roller2, 4);                /* 设置显示行 */
	lv_obj_align(roller2, NULL, LV_ALIGN_CENTER, 100, 0);       /* 设置位置 */
}

三、获取选择的选项

使用函数 lv_roller_get_selected(roller) 可以获取滚轮列表当前选中的选项，它将返回所选选项的索引。函数 lv_roller_get_selected_str(roller, buf, buf_size) 可以将所选选项的名称复制到 buf 中，以便其他程序调用。

char buf[32];                                              /* 创建数组 */
lv_dropdown_get_selected_str(obj, buf, sizeof(buf));       /* 获取所选值 */
lv_label_set_text_fmt(label, "Selected: %s\n", buf);       /* 更新标签内容 */

四、对齐选项

当滚轮列变内选项标签的长度不等长时，用户可以通过函数 lv_roller_set_align(roller, LV_LABEL_ALIGN_LEFT/CENTER/RIGHT) 来设置选项标签的水平对齐属性。下面的例子可见选项标签的左对齐、居中对齐、右对齐效果。

void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                       /* 初始化lvgl2rtt */
 
	lv_obj_t *roller1 = lv_roller_create(lv_scr_act(), NULL);   /* 创建滚轮列表 */
	lv_roller_set_align(roller1, LV_LABEL_ALIGN_LEFT);          /* 设置左对齐 */
	lv_obj_set_style_local_text_font(roller1, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &hei_16);                                                                  /* 设置字体 */
	lv_roller_set_options(roller1, " 星期一 \n" " 星期二 \n" " 星期三三三 \n" " 星期四 \n" " 星期五 \n" " 星期六 \n" " 星期七 ", LV_ROLLER_MODE_INIFINITE);         /* 设置选项 */
	lv_roller_set_visible_row_count(roller1, 4);                /* 设置显示行 */
	lv_obj_align(roller1, NULL, LV_ALIGN_CENTER, -160, 0);      /* 设置位置 */
 
	lv_obj_t *roller2 = lv_roller_create(lv_scr_act(), NULL);   /* 创建滚轮列表 */
	lv_roller_set_align(roller2, LV_LABEL_ALIGN_CENTER);        /* 设置居中对齐 */
	lv_obj_set_style_local_text_font(roller2, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &hei_16);                                                                  /* 设置字体 */
	lv_roller_set_options(roller2, " 星期一 \n" " 星期二 \n" " 星期三三三 \n" " 星期四 \n" " 星期五 \n" " 星期六 \n" " 星期七 ", LV_ROLLER_MODE_INIFINITE);         /* 设置选项 */
	lv_roller_set_visible_row_count(roller2, 4);                /* 设置显示行 */
	lv_obj_align(roller2, NULL, LV_ALIGN_CENTER, 0, 0);         /* 设置位置 */
 
	lv_obj_t *roller3 = lv_roller_create(lv_scr_act(), NULL);   /* 创建滚轮列表 */
	lv_roller_set_align(roller3, LV_LABEL_ALIGN_RIGHT);         /* 设置右对齐 */
	lv_obj_set_style_local_text_font(roller3, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &hei_16);                                                                  /* 设置字体 */
	lv_roller_set_options(roller3, " 星期一 \n" " 星期二 \n" " 星期三三三 \n" " 星期四 \n" " 星期五 \n" " 星期六 \n" " 星期七 ", LV_ROLLER_MODE_INIFINITE);         /* 设置选项 */
	lv_roller_set_visible_row_count(roller3, 4);                /* 设置显示行 */
	lv_obj_align(roller3, NULL, LV_ALIGN_CENTER, 160, 0);       /* 设置位置 */
}

五、可见行

可见行是控件上最大能够显示的选项行数，默认为三行。滚轮列表的可见行数可以通过 lv_roller_set_visible_row_count(roller, num) 来设置，控件的高度会随之改变。

void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                       /* 初始化lvgl2rtt */
 
	lv_obj_t *roller1 = lv_roller_create(lv_scr_act(), NULL);   /* 创建滚轮列表 */
	lv_roller_set_align(roller1, LV_LABEL_ALIGN_LEFT);          /* 设置左对齐 */
	lv_obj_set_style_local_text_font(roller1, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &hei_16);                                                                  /* 设置字体 */
	lv_roller_set_options(roller1, " 星期一 \n" " 星期二 \n" " 星期三 \n" " 星期四 \n" " 星期五 \n" " 星期六 \n" " 星期七 ", LV_ROLLER_MODE_INIFINITE);              /* 设置选项 */
	lv_roller_set_visible_row_count(roller1, 3);                /* 设置显示行 */
	lv_obj_align(roller1, NULL, LV_ALIGN_CENTER, -100, 0);      /* 设置位置 */
 
	lv_obj_t *roller2 = lv_roller_create(lv_scr_act(), NULL);   /* 创建滚轮列表 */
	lv_roller_set_align(roller2, LV_LABEL_ALIGN_CENTER);        /* 设置居中对齐 */
	lv_obj_set_style_local_text_font(roller2, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &hei_16);                                                                  /* 设置字体 */
	lv_roller_set_options(roller2, " 星期一 \n" " 星期二 \n" " 星期三 \n" " 星期四 \n" " 星期五 \n" " 星期六 \n" " 星期七 ", LV_ROLLER_MODE_INIFINITE);              /* 设置选项 */
	lv_roller_set_visible_row_count(roller2, 4);                /* 设置显示行 */
	lv_obj_align(roller2, NULL, LV_ALIGN_CENTER, 100, 0);       /* 设置位置 */
}

六、动画时间

当滚轮滚动且未完全停在某个选项上时，它将自动滚动到最近的有效选项。滚动动画的时间可以通过 lv_roller_set_anim_time(roller, anim_time) 更改，动画时间为零表示没有动画。

七、事件

此外，通用事件以及以下特殊事件是通过下拉列表发送的：

LV_EVENT_VALUE_CHANGED 选择新选项时发送

以下按键由按钮处理：

LV_KEY_RIGHT / DOWN 选择下一个选项
LV_KEY_LEFT / UP 选择上一个选项
LY_KEY_ENTER 应用选定的选项（发送 LV_EVENT_VALUE_CHANGED 事件）

static void event_handler(lv_obj_t * obj, lv_event_t event)
{
	if(event == LV_EVENT_VALUE_CHANGED) {
		char buf[32];
		lv_roller_get_selected_str(obj, buf, sizeof(buf));        /* 获取所选值 */
		if(!strcmp(buf, " 红色 "))lv_label_set_text_fmt(label, "#ff0000 %s#\n", buf);       /* 更新标签内容 */
		else if(!strcmp(buf, " 黄色 "))lv_label_set_text_fmt(label, "#00ff00 %s#\n", buf);  
		else if(!strcmp(buf, " 蓝色 "))lv_label_set_text_fmt(label, "#0000ff %s#\n", buf); 
		else if(!strcmp(buf, " 绿色 "))lv_label_set_text_fmt(label, "#ffff00 %s#\n", buf); 
		else if(!strcmp(buf, " 黑色 "))lv_label_set_text_fmt(label, "#000000 %s#\n", buf); 
		else lv_label_set_text_fmt(label, "#000000 %s#\n", buf); 
	} 
}
void lv_gui_run(void){
	lvgl2rtt_init("lcd");                                         /* 初始化lvgl2rtt */
 
	label = lv_label_create(lv_scr_act(), NULL);                  /* 创建标签 */
	lv_obj_set_pos(label, 20, 20);                                /* 设置显示坐标 */
	lv_label_set_recolor(label, true);
	lv_obj_set_style_local_text_font(label, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &hei_16); 
	lv_label_set_text(label, "#ff0000  红色 #");                  /* 设置初始内容 */
 
	lv_obj_t *roller1 = lv_roller_create(lv_scr_act(), NULL);     /* 创建滚轮列表 */
	lv_roller_set_align(roller1, LV_LABEL_ALIGN_LEFT);            /* 设置左对齐 */
	lv_obj_set_style_local_text_font(roller1, LV_LABEL_PART_MAIN, LV_STATE_DEFAULT, &hei_16); /* 设置字体 */
	lv_roller_set_options(roller1, " 红色 \n" " 绿色 \n" " 蓝色 \n" " 黄色 \n" " 黑色 " , LV_ROLLER_MODE_INIFINITE);       /* 设置选项 */
	lv_roller_set_visible_row_count(roller1, 4);                  /* 设置显示行 */
	lv_obj_align(roller1, NULL, LV_ALIGN_CENTER, -100, 0);        /* 设置位置 */
 
	lv_obj_set_event_cb(roller1, event_handler);                  /* 设置回调函数 */
}

版本	日期	作者	修改内容
银杏科技有限公司旗下技术文档发布平台
技术支持电话	0379-69926675-801
技术支持邮件	Gingko@vip.163.com
V1.0	2020-12-26	yang	初次建立

用户工具

站点工具

目录