LVGL-lv_tileview

数贾电子科技

于 2025-05-12 08:00:00 发布

阅读量934

点赞数 36

分类专栏： # LVGL 文章标签： lvlg titleview

本文链接：https://blog.csdn.net/huanghongqi11/article/details/147859490

版权

LVGL 专栏收录该内容

10 篇文章

订阅专栏

1 背景介绍

1.1 背景介绍

lv_tileview 是 LVGL 提供的一个特殊容器控件，用于创建一个可通过滑动手势或动画切换的多页面视图。它将多个“子页面”排列在一个二维网格中，用户可以通过上下左右滑动在这些页面间切换，就像手机主屏滑动切换桌面页面一样。

1.2 基本概念

tileview 是一个容器对象，可以添加多个 “tile”（瓷砖/页面）。
每个 tile 是一个标准的 lv_obj_t，你可以往里面添加按钮、图表、图像等子控件。
tileview 支持方向控制（例如只允许左右滑动，或上下左右都允许）。
页面会以滑动吸附的方式进行切换，不会卡在中间。

1.3 应用场景

主页分页 / 主屏切换
类似 Android 桌面左右滑动切换多个主屏，每个 tile 显示不同的功能或快捷入口。
数据仪表盘
每页一个仪表界面，如温度、湿度、电量等，适合工业设备、物联网面板（HMI）。
图片 / 相册浏览器
每个 tile 显示一张图片，用户通过滑动浏览相册或图像列表。
多页设置菜单
每个 tile 是一个设置分类页面（如 WiFi、亮度、声音等），支持触摸滑动切换，用户体验好。
导航类界面
比如地图软件，或某些路径控制界面；每页对应一个功能或子模块。
数字输入或多种键盘布局
一个 tile 是数字键盘，另一个 tile 是字母键盘。滑动切换不同输入方式。

1.4 注意事项

lv_tileview 是基于滚动容器构建的，所以不能嵌套在另一个滚动容器中。
每个 tile 是一个独立的容器对象，可以像普通控件一样操作。
页面较多时建议控制每页内容复杂度，避免内存压力。
若要实现滑动后执行某些操作，可监听 LV_EVENT_SCROLL_END 事件

2 主要函数介绍

2.1 创建 tileview

这将在当前屏幕上创建一个 tileview 对象。

lv_obj_t * tv = lv_tileview_create(lv_scr_act());

在这里插入图片描述

2.2 添加 tile 页面

lv_obj_t * tile = lv_tileview_add_tile(tv, x, y, allowed_dirs);

x 和 y 是 tile 的坐标（网格中位置）
allowed_dirs 表示从这个 tile 可以滑动到哪些方向，例如 LV_DIR_HOR | LV_DIR_VER

2.2.1 水平移动

    lv_obj_t* tile1= lv_tileview_add_tile(tileview, 0, 0, LV_DIR_HOR );  // 第一个页面
    // 添加内容
    lv_obj_t* label = lv_label_create(tile1);
    lv_label_set_text(label, "first page");
    lv_obj_center(label);

    lv_obj_t* tile2=lv_tileview_add_tile(tileview, 1, 0, LV_DIR_HOR );  // 第二个页面

        // 添加内容
    label = lv_label_create(tile2);
    lv_label_set_text(label, "second page");
    lv_obj_center(label);

    lv_obj_scroll_to(tile2, 0,1, LV_ANIM_ON);

水平滑动

2.2.2 垂直移动

    lv_obj_t* tile1= lv_tileview_add_tile(tileview, 0, 0, LV_DIR_VER);  // 第一个页面
    // 添加内容
    lv_obj_t* label = lv_label_create(tile1);
    lv_label_set_text(label, "first page");
    lv_obj_center(label);

    lv_obj_t* tile2=lv_tileview_add_tile(tileview, 0, 1, LV_DIR_VER);  // 第二个页面

        // 添加内容
    label = lv_label_create(tile2);
    lv_label_set_text(label, "second page");
    lv_obj_center(label);

    lv_obj_scroll_to(tile2, 0,1, LV_ANIM_ON);

垂直移动

2.3 移动

2.3.1 手动移动

控制对象滚动条位置的函数，它可以将一个对象（如 tile 或滚动容器中的控件）滚动到特定的坐标位置，支持动画。

void lv_obj_scroll_to(lv_obj_t * obj, lv_coord_t x, lv_coord_t y, lv_anim_enable_t en);

obj lv_obj_t * 目标对象- tileview
x lv_coord_t 滚动条的横向目标位置（以像素为单位）
y lv_coord_t 滚动条的纵向目标位置，x 和 y 是指目标控件左上角相对于容器内容的坐标，而不是屏幕坐标。如果你不确定具体坐标，可以使用 lv_obj_scroll_to_view() 代替，自动定位。
en lv_anim_enable_t 是否启用动画（LV_ANIM_ON 或 LV_ANIM_OFF）

或者使用

void lv_obj_set_tile_id(lv_obj_t * obj, uint32_t col_id, uint32_t row_id, lv_anim_enable_t anim);

参数类型含义
obj lv_obj_t * tileview 对象本身
col_id uint32_t 目标 tile 的列号（x方向）
row_id uint32_t 目标 tile 的行号（y方向）
anim lv_anim_enable_t 是否启用动画（LV_ANIM_ON 或 LV_ANIM_OFF）

lv_obj_scroll_to_view(tile2, LV_ANIM_ON);
lv_coord_t y = lv_obj_get_y(tile2);
lv_coord_t x = lv_obj_get_x(tile2);
lv_obj_scroll_to(tileview, 480, 0, LV_ANIM_ON);

lv_obj_set_tile_id(tileview, 1, 0, LV_ANIM_ON);  // 切换到 tile2

2.3.2 自动移动

    lv_obj_scroll_to_view(tile1, LV_ANIM_ON);

或者

void lv_obj_set_tile(lv_obj_t * tileview, lv_obj_t * tile_obj, lv_anim_enable_t anim);

lv_obj_set_tile(tileview, tile1, LV_ANIM_ON);
lv_obj_scroll_to_view(tile1, LV_ANIM_ON);

自动滑动

2.4 获取哪个页面在显示

lv_obj_t * lv_tileview_get_tile_act(lv_obj_t * tileview);

3 综合案例应用

创建 tileview 页面系统；
每个页面背景颜色不同；
第 1 页显示电子表（数字时钟）并实时更新；
第 2 页显示日期；页面可左右滑动切换；

void create_tileview_ui(void) {
    // 创建 tileview
    lv_obj_t* tileview = lv_tileview_create(lv_scr_act());

    // === Tile 1: 数字时钟 ===
    lv_obj_t* tile_clock = lv_tileview_add_tile(tileview, 0, 0, LV_DIR_HOR);
    lv_obj_set_style_bg_color(tile_clock, lv_color_hex(0x003366), 0);  // 深蓝色
    lv_obj_set_style_bg_opa(tile_clock, LV_OPA_COVER, 0);

    lv_obj_t* label_time = lv_label_create(tile_clock);
    lv_obj_set_style_text_font(label_time, &lv_font_montserrat_48, 0);
    lv_obj_center(label_time);

    // 每秒更新时间
    lv_timer_create([](lv_timer_t* t) {
        time_t rawtime;
        struct tm* timeinfo;
        time(&rawtime);
        timeinfo = localtime(&rawtime);
        static char buf[16];
        strftime(buf, sizeof(buf), "%H:%M:%S", timeinfo);
        lv_label_set_text((lv_obj_t*)t->user_data, buf);
        }, 1000, label_time);




    // === Tile 2: 日期页 ===
    lv_obj_t* tile_date = lv_tileview_add_tile(tileview, 1, 0, LV_DIR_HOR);
    lv_obj_set_style_bg_color(tile_date, lv_color_hex(0x226600), 0);  // 深绿色
    lv_obj_set_style_bg_opa(tile_date, LV_OPA_COVER, 0);

    lv_obj_t* label_date = lv_label_create(tile_date);
    lv_obj_set_style_text_font(label_date, &lv_font_montserrat_28, 0);
    lv_obj_center(label_date);

    // 设置日期文本
    time_t rawtime;
    struct tm* timeinfo;
    time(&rawtime);
    timeinfo = localtime(&rawtime);
    static char date_buf[32];
    strftime(date_buf, sizeof(date_buf), "%Y-%m-%d", timeinfo);
    lv_label_set_text(label_date, date_buf);


}