【LVGL布局】网格布局

通过查看LVGL的 Widgets demo 的源码，可发现此 demo 采用了网格布局，对网格布局部分代码进行分析，柔性布局先不看！

官方示例项目

---

行列大小描述

必须要描述行和列的大小，可通过声明两个数组来完成。数组的最后一个元素是 LV_GRID_TEMPLATE_LAST 。

例如：

static lv_coord_t column_dsc[] = {100, 400, LV_GRID_TEMPLATE_LAST};   /*2 columns with 100 and 400 ps width*/
static lv_coord_t row_dsc[] = {100, 100, 100, LV_GRID_TEMPLATE_LAST}; /*3 100 px tall rows*/

创建完成后，可例比创建了一个单元格！以上方例子为 3×2 表格！

除像素设置外，还有两个特殊值设置：

• LV_GRID_CONTENT：将宽度设置为最大的子对象。
• LV_GRID_FR(x) ：使用剩余空间的哪一部分。值越大，空间越大。

关于这两个的定义：

#define LV_GRID_FR(x)          (LV_COORD_MAX - 100 + x)
#define LV_GRID_CONTENT        (LV_COORD_MAX - 101

例如：

static lv_coord_t grid_main_col_dsc[] = {LV_GRID_FR(1), LV_GRID_FR(1), LV_GRID_TEMPLATE_LAST};
static lv_coord_t grid_main_row_dsc[] = {LV_GRID_CONTENT, LV_GRID_CONTENT, LV_GRID_TEMPLATE_LAST};

在父级上设置描述：

lv_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)

---

添加子对象到网格中！

子对象需要手动添加！

lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span)

参数：

column_align & row_align 确定如何对齐子对象。可选参数：

• LV_GRID_ALIGN_START：水平方向左，垂直方向上
• LV_GRID_ALIGN_CENTER：居中
• LV_GRID_ALIGN_END：水平方向右，垂直方向下

column_pos & row_pos 确定放置的单元格位置。

column_span & row_span 该项目应从起始单元格开始涉及多少个格。必须≥1。

例子：

lv_obj_set_grid_cell(panel2_title, LV_GRID_ALIGN_START, 0, 2, LV_GRID_ALIGN_CENTER, 0, 1);
lv_obj_set_grid_cell(user_name, LV_GRID_ALIGN_STRETCH, 0, 1, LV_GRID_ALIGN_CENTER, 3, 1);
lv_obj_set_grid_cell(user_name_label, LV_GRID_ALIGN_START, 0, 1, LV_GRID_ALIGN_START, 2, 1);

网格对齐

• LV_GRID_ALIGN_START：水平方向左，垂直方向上
• LV_GRID_ALIGN_CENTER：居中
• LV_GRID_ALIGN_END：水平方向右，垂直方向下
• LV_GRID_ALIGN_STRETCH：
• LV_GRID_ALIGN_SPACE_EVENLY：使两项目间距相等
• LV_GRID_ALIGN_SPACE_AROUND：在一行/列上均匀分布，视觉空间不相等
• LV_GRID_ALIGN_SPACE_BETWEEN：在一行/列上均匀分布

注意 track_cross_place 下的适用问题。设置轨道对齐方式，需使用：

lv_obj_set_grid_align(obj, column_align, row_align)

---

网格风格

lv_style_set_<property_name>(&style, <value>);
lv_obj_set_style_<property_name>(obj, <value>, <selector>);

• GRID_COLUMN_DSC_ARRAY
• GRID_ROW_DSC_ARRAY
• GRID_COLUMN_ALIGN
• GRID_ROW_ALIGN
• GRID_CELL_X_ALIGN
• GRID_CELL_COLUMN_POS
• GRID_CELL_COLUMN_SPAN
• GRID_CELL_Y_ALIGN
• GRID_CELL_ROW_POS
• GRID_CELL_ROW_SPAN

内容填充

要修改 Grid 在对象之间插入的最小空间，可以在 Grid 容器样式上设置以下属性：

• pad_row 设置行之间的填充。
• pad_column 设置列之间的填充。

一般而言，简单的网格布局到这里就可以实现了。