LVGL的滑动页（Tileview）用于实现可滚动内容区域或数值选择界面，支持横向/纵向滑动及动态交互。该控件对应官方手册中的tile view（平铺视图），平铺视图(Tileview)是一个容器对象，其中的元素（ tiles（瓷砖） ）可以以网格形式排列。用户可以通过滑动在瓷砖之间导航。可以单独在瓷砖上禁用任意方向的滑动，以防止从一个瓷砖移动到另一个瓷砖。如果平铺视图设置为屏幕大小，则用户界面类似于在智能手表上看到的界面。
(1) 用法
[1]添加瓷砖(Add a tile)
lv_tileview_add_tile(tileview, row_id, col_id, dir) 函数在平铺视图 tileview 中的第 col_id 列和第 row_id 行创建了一个新的瓷砖。dir 参数可以是 LV_DIR_LEFT/RIGHT/TOP/BOTTOM/HOR/VER/ALL 中的一个或多个值，通过按位或（OR-ed）操作来组合，以允许通过滑动手势在给定方向上移动到相邻的瓷砖。返回的值是 lv_obj_t * 可以在其（瓷砖）上填充内容。
[2]切换显示(Change tile)
平铺视图可以使用接口lv_tileview_set_tile(tileview,tile_obj,LV_ANIM_ON/OFF)
或lv_tileview_set_tile_by_index(tileview,col_id,row_id,LV_ANIM_ON/OFF)切换到指定瓷砖
(2)事件
• LV_EVENT_VALUE_CHANGED 当通过滚动加载新瓷砖时发送此事件，接口 lv_tileview_get_tile_active(tabview) 可用于获取当前所在的瓷砖。
以下是在GUI_guider平台使用的滑动页，在该滑动页添加了按键控件：
以下是实现的代码：
//Write codes screen_1_tileview_1
//添加滑动页
ui->screen_1_tileview_1 = lv_tileview_create(ui->screen_1);
//创建一个新的瓦片视图对象，并将其父对象设置为 screen_1，意味着该Tileview会出现在屏幕上
ui->screen_1_tileview_1_tile = lv_tileview_add_tile(ui->screen_1_tileview_1, 0, 0, LV_DIR_RIGHT);
//设置位置以及大小
lv_obj_set_pos(ui->screen_1_tileview_1, 481, 135);
lv_obj_set_size(ui->screen_1_tileview_1, 383, 200);
//关闭滚动条
lv_obj_set_scrollbar_mode(ui->screen_1_tileview_1, LV_SCROLLBAR_MODE_OFF);
//Write style for screen_1_tileview_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//为瓦片视图的主部分（LV_PART_MAIN）设置背景透明度为255（完全不透明），背景颜色为 #f6f6f6（浅灰色），没有渐变效果（LV_GRAD_DIR_NONE），圆角半径为0（即没有圆角），没有阴影。
lv_obj_set_style_bg_opa(ui->screen_1_tileview_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1_tileview_1, lv_color_hex(0xf6f6f6), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_tileview_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_1_tileview_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(ui->screen_1_tileview_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//Write style for screen_1_tileview_1, Part: LV_PART_SCROLLBAR, State: LV_STATE_DEFAULT.
//为瓦片视图的滚动条部分（LV_PART_SCROLLBAR）设置背景颜色为 #eaeff3（浅蓝色），透明度为255，其他样式与主部分相同。
lv_obj_set_style_bg_opa(ui->screen_1_tileview_1, 255, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1_tileview_1, lv_color_hex(0xeaeff3), LV_PART_SCROLLBAR|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_tileview_1, LV_GRAD_DIR_NONE, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_1_tileview_1, 0, LV_PART_SCROLLBAR|LV_STATE_DEFAULT);
//Write codes screen_1_btn_1
//在视图添加按键
ui->screen_1_btn_1 = lv_btn_create(ui->screen_1_tileview_1_tile);
//创建按钮上的标签（screen_1_btn_1_label），并将其文本设置为“Button”。此外，设置文本自动换行，并将标签对齐到按钮的中心。
ui->screen_1_btn_1_label = lv_label_create(ui->screen_1_btn_1);
lv_label_set_text(ui->screen_1_btn_1_label, “Button”);
lv_label_set_long_mode(ui->screen_1_btn_1_label, LV_LABEL_LONG_WRAP);
lv_obj_align(ui->screen_1_btn_1_label, LV_ALIGN_CENTER, 0, 0);
//设置按钮的内边距为0，标签宽度为按钮宽度的100%，按钮位置为 (142, 91)，大小为 100x50。
lv_obj_set_style_pad_all(ui->screen_1_btn_1, 0, LV_STATE_DEFAULT);
lv_obj_set_width(ui->screen_1_btn_1_label, LV_PCT(100));
lv_obj_set_pos(ui->screen_1_btn_1, 142, 91);
lv_obj_set_size(ui->screen_1_btn_1, 100, 50);
//Write style for screen_1_btn_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置按钮的背景颜色为 #2195f6（蓝色），透明度为255，去除边框，圆角半径为5，去除阴影。文本颜色为白色，字体为 lv_font_montserratMedium_16（Montserrat字体，16号），并设置文本透明度为255（完全不透明），文本对齐方式为居中。
lv_obj_set_style_bg_opa(ui->screen_1_btn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_color(ui->screen_1_btn_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_bg_grad_dir(ui->screen_1_btn_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_border_width(ui->screen_1_btn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_radius(ui->screen_1_btn_1, 5, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_shadow_width(ui->screen_1_btn_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_color(ui->screen_1_btn_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_font(ui->screen_1_btn_1, &lv_font_montserratMedium_16, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_opa(ui->screen_1_btn_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_text_align(ui->screen_1_btn_1, LV_TEXT_ALIGN_CENTER, LV_PART_MAIN|LV_STATE_DEFAULT);
下一期讲解其他控件的基础使用。
本文章由威三学社出品
对课程感兴趣可以私信联系