LVGL|使用lv_table(表格)时添加网格效果

挨踢民工biubiu

已于 2022-04-10 11:48:14 修改

阅读量3.3k

点赞数 5

分类专栏： LVGL GUI 嵌入式文章标签：单片机 stm32 freertos LVGL gui

于 2022-04-01 13:30:12 首次发布

本文链接：https://blog.csdn.net/qq_35181236/article/details/123895262

版权

LVGL 同时被 3 个专栏收录

36 篇文章 230 订阅

订阅专栏

嵌入式

35 篇文章 15 订阅

订阅专栏

GUI

22 篇文章 1 订阅

订阅专栏

前言

在lvgl中创建出来的 lv_table 默认是没有网格，但是我们平时使用的表格，每个单元格都是用网格隔开的。比如excel：
在这里插入图片描述

但是，LVGL默认创建出来的表格是这样的：

在这里插入图片描述
下面就来说说怎么让lvgl中的表格修改成像excel的样式。

修改思路

我们的需求很简单，就是让每个单元格都有线条框起来。那么这个在LVGL里面，我们改怎么办呢？这里我们要先理解LVGL中盒子模型：

在这里插入图片描述

关于盒子模型的讲解可以点击这个链接查看发布在b站的教程： https://www.bilibili.com/video/BV1Ya411r7K2?p=10

对盒子模型有了了解之后
我们就可以根据盒子模型尝试设置 border或者outline的样式。

实验代码

实际上只有设置 outline 样式才能达到我们想要的效果，下面在LVGL的 Simple table 示例做修改：

static void draw_part_event_cb(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);
    lv_obj_draw_part_dsc_t * dsc = lv_event_get_param(e);
    /*If the cells are drawn...*/
    if(dsc->part == LV_PART_ITEMS) {
        uint32_t row = dsc->id /  lv_table_get_col_cnt(obj);
        uint32_t col = dsc->id - row * lv_table_get_col_cnt(obj);

        /*Make the texts in the first cell center aligned*/
        if(row == 0) {
            dsc->label_dsc->align = LV_TEXT_ALIGN_CENTER;
            dsc->rect_dsc->bg_color = lv_color_mix(lv_palette_main(LV_PALETTE_BLUE), dsc->rect_dsc->bg_color, LV_OPA_20);
            dsc->rect_dsc->bg_opa = LV_OPA_COVER;

        }
        /*In the first column align the texts to the right*/
        else if(col == 0) {
            dsc->label_dsc->align = LV_TEXT_ALIGN_RIGHT;
        }

        /*MAke every 2nd row grayish*/
        if((row != 0 && row % 2) == 0) {
            dsc->rect_dsc->bg_color = lv_color_mix(lv_palette_main(LV_PALETTE_GREY), dsc->rect_dsc->bg_color, LV_OPA_10);
            dsc->rect_dsc->bg_opa = LV_OPA_COVER;
        }
    }
}


static void lv_example_table_1(void)
{
    lv_obj_t * table = lv_table_create(lv_scr_act());

    /*Fill the first column*/
    lv_table_set_cell_value(table, 0, 0, "Name");
    lv_table_set_cell_value(table, 1, 0, "Apple");
    lv_table_set_cell_value(table, 2, 0, "Banana");
    lv_table_set_cell_value(table, 3, 0, "Lemon");
    lv_table_set_cell_value(table, 4, 0, "Grape");
    lv_table_set_cell_value(table, 5, 0, "Melon");
    lv_table_set_cell_value(table, 6, 0, "Peach");
    lv_table_set_cell_value(table, 7, 0, "Nuts");

    /*Fill the second column*/
    lv_table_set_cell_value(table, 0, 1, "Price");
    lv_table_set_cell_value(table, 1, 1, "$7");
    lv_table_set_cell_value(table, 2, 1, "$4");
    lv_table_set_cell_value(table, 3, 1, "$6");
    lv_table_set_cell_value(table, 4, 1, "$2");
    lv_table_set_cell_value(table, 5, 1, "$5");
    lv_table_set_cell_value(table, 6, 1, "$1");
    lv_table_set_cell_value(table, 7, 1, "$9");

    /*Set a smaller height to the table. It'll make it scrollable*/
    lv_obj_set_height(table, 460);
    lv_obj_center(table);

    /*Add an event callback to to apply some custom drawing*/
    lv_obj_add_event_cb(table, draw_part_event_cb, LV_EVENT_DRAW_PART_BEGIN, NULL);
    lv_obj_set_style_outline_width(table, 2, LV_PART_ITEMS);  // 添加网格

}