| **银杏科技有限公司旗下技术文档发布平台** ||||
|技术支持电话|**0379-69926675-801**|||
|技术支持邮件|Gingko@vip.163.com|||
^ 版本 ^ 日期 ^ 作者 ^ 修改内容 ^
| V1.0 | 2020-12-26 | yang | 初次建立 |
===== 实验二十六：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** 是选项的索引。
{{ :icore4t:icore4t_rtt_lvgl_26_1.gif?direct |}}
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)** 来设置选项标签的水平对齐属性。 下面的例子可见选项标签的左对齐、居中对齐、右对齐效果。
{{ :icore4t:icore4t_rtt_lvgl_26_2.png?direct |}}
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)** 来设置，控件的高度会随之改变。
{{ :icore4t:icore4t_rtt_lvgl_26_3.png?direct |}}
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** 事件）
{{ :icore4t:icore4t_rtt_lvgl_26_4.gif?direct |}}
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); /* 设置回调函数 */
}