LVGL8学习之Grid（简单网格布局）

这一篇来学习一下简单的网格布局grid，主要的步骤如下：

（1）创建对象，给对象添加网格布局LV_LAYOUT_GRID 

（2）给对象设置行列描述数组，注意，行列描述数组的最后一个元素必须是LV_GRID_TEMPLATE_LAST

（2）给对象添加Item并显示

还是通过codeblock来模拟代码的运行，代码如下：

void lv_layout_simple_grid()
{
    // 定义行和列描述符的数组，数组的最后一个元素必须是LV_GRID_TEMPLATE_LAST
    static lv_coord_t col_dsc[] = {70, 70, 70, LV_GRID_TEMPLATE_LAST}; // 3行，分别为：70,70,70 像素的宽度
    static lv_coord_t row_dsc[] = {50, 50, 50, LV_GRID_TEMPLATE_LAST}; // 3列，分别为：50,50,50 像素的高度

    lv_obj_t * cont = lv_obj_create(lv_scr_act()); // 基于屏幕创建一个容器对象
    if (cont == NULL)
    {
        return ;
    }

    lv_obj_set_size(cont, 300, 220); // 设置对象宽度和高度
    lv_obj_center(cont); // 设置对象居屏幕中间显示
    lv_obj_set_layout(cont, LV_LAYOUT_GRID); //设置对象使用网格布局
    lv_obj_set_style_grid_column_dsc_array(cont, col_dsc, 0); // 设置对象网格布局行描述数组
    lv_obj_set_style_grid_row_dsc_array(cont, row_dsc, 0); // 设置对象网格布局列描述数组

    lv_obj_t * label = NULL;
    lv_obj_t * obj = NULL;

    static lv_style_t obj_style;
    lv_style_init(&obj_style); // 初始化按钮样式
    lv_style_set_radius(&obj_style, 0); // 设置样式圆角弧度

    int i = 0;
    for(i = 0; i < 9; i++)
    {
        int col = i % 3;
        int row = i / 3;

        obj = lv_btn_create(cont);
        if (obj != NULL)
        {
             // 设置对应在网格布局中水平和垂直方向弹簧拉伸
            lv_obj_set_grid_cell(obj, LV_GRID_ALIGN_STRETCH, col, 1, LV_GRID_ALIGN_STRETCH, row, 1);
            lv_obj_add_style(obj, &obj_style, 0); // 给对象添加样式

            label = lv_label_create(obj); // 基于对象创建一个标签
            if (label != NULL)
            {
                lv_label_set_text_fmt(label, "c%d, r%d", col, row); // 设置标签文本
                lv_obj_center(label); // 标签基于父对象居中显示
            }
        }
    }
}

运行效果：