[lvgl layout] grid layout

By looking at LVGL Of Widgets demo Source code , This can be found demo Grid layout adopted , Analyze the code of grid layout , Don't look at the flexible layout first ！

The official example project

---

Row and column size description

You must describe the size of rows and columns , You can do this by declaring two arrays . The last element of the array is LV_GRID_TEMPLATE_LAST .

for example ：

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*/

After creation , Kebi created a cell ！ Take the example above as 3×2 form ！

In addition to pixel settings , There are also two special value settings ：

• LV_GRID_CONTENT： Set the width to the largest sub object .
• LV_GRID_FR(x) ： Which part of the remaining space is used . The bigger the value is. , The bigger the space .

About the definition of these two ：

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

for example ：

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};

Set the description on the parent ：

lv_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)

---

Add sub objects to the mesh ！

Sub objects need to be added manually ！

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

Parameters ：

column_align & row_align Determine how to align child objects . Optional parameters ：

• LV_GRID_ALIGN_START： Horizontal left , Vertically
• LV_GRID_ALIGN_CENTER： In the middle
• LV_GRID_ALIGN_END： Horizontal right , Vertically

column_pos & row_pos Determine the position of the placed cell .

column_span & row_span How many cells should the item involve starting from the starting cell . must ≥1.

Example ：

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);

Grid alignment

• LV_GRID_ALIGN_START： Horizontal left , Vertically
• LV_GRID_ALIGN_CENTER： In the middle
• LV_GRID_ALIGN_END： Horizontal right , Vertically
• LV_GRID_ALIGN_STRETCH：
• LV_GRID_ALIGN_SPACE_EVENLY： Make the distance between two items equal
• LV_GRID_ALIGN_SPACE_AROUND： In a row / Evenly distributed on the column , Visual space is not equal
• LV_GRID_ALIGN_SPACE_BETWEEN： In a row / Evenly distributed on the column

Be careful track_cross_place Applicable problems under . Set track alignment , Need to use ：

lv_obj_set_grid_align(obj, column_align, row_align)

---

Grid style

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

Content filling

To be modified Grid The minimum space to insert between objects , Can be in Grid Set the following properties on the container style ：

• pad_row Set padding between rows .
• pad_column Set the padding between columns .

generally speaking , Simple grid layout can be realized here .