1
2
3
4
5
6
7
8

 LV_FLEX_FLOW_ROW 				  //将子元素排成一排而不包裹
 LV_FLEX_FLOW_COLUMN 			  //将子项放在一列中而不换行
 LV_FLEX_FLOW_ROW_WRAP 			  //将孩子排成一排并包裹起来 （超出部分换行）
 LV_FLEX_FLOW_COLUMN_WRAP 		  //将子元素放置在带有环绕的列中 （超出部分换列）
 LV_FLEX_FLOW_ROW_REVERSE 		  //将子元素排成一行而不换行，但顺序相反
 LV_FLEX_FLOW_COLUMN_REVERSE 	  //将子项放在一列中，不换行，但顺序相反
 LV_FLEX_FLOW_ROW_WRAP_REVERSE 	  //将子元素排成一行而不换行，但顺序相反
 LV_FLEX_FLOW_COLUMN_WRAP_REVERSE //将子项放在一列中，不换行，但顺序相反

1

lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW);        // 设置对象容器使用基于行的流失弹性布局flex

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

void lv_demonstrate_flex_grow()
{
    lv_obj_t * cont = lv_obj_create(lv_scr_act()); // 基于屏幕创建一个cont容器对象
    if (cont == NULL)
    {
        return;
    }
 
    lv_obj_set_size(cont, 400, 220); // 设置对象大小
    lv_obj_center(cont); // 对象显示在屏幕中央
    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW); // 设置对象弹性布局的排列方式，把子对象排成一行，而不需要包裹
 
    lv_obj_t * obj = NULL;
    obj = lv_obj_create(cont);
    if (obj != NULL)
    {
        lv_obj_set_size(obj, 20, 40); // 设置对象大小
    }
 
    obj = lv_obj_create(cont);
    if (obj != NULL)
    {
        lv_obj_set_height(obj, 40); // 设置对象高度
        lv_obj_set_flex_grow(obj, 1);  // 宽度弹性增长，使用一份的剩余空间
    }
 
    obj = lv_obj_create(cont);
    if (obj != NULL)
    {
        lv_obj_set_height(obj, 40);
        lv_obj_set_flex_grow(obj, 2);   // 宽度弹性增长，使用2份的剩余空间
    }
 
    obj = lv_obj_create(cont);
    if (obj != NULL)
    {
        lv_obj_set_height(obj, 40);
        lv_obj_set_flex_grow(obj, 3);   // 宽度弹性增长，使用3份的剩余空间
    }
 
    obj = lv_obj_create(cont);
    if (obj != NULL)
    {
        lv_obj_set_size(obj, 40, 40);
    }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

    lv_obj_t* cont = lv_obj_create(lv_scr_act());               // 创建一个对象容器 cont
    lv_obj_set_size(cont, 350, 420);                            // 设置对象容器大小
    lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 5);                 // 设置对象容器基于屏幕中间对齐
    lv_obj_set_style_pad_all(cont, 25, LV_PART_MAIN);           // 设置对象容器内部 item 与容器边的上下左右间距
    //lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN);           // 设置对象容器内部 item 之间的行间距
    //lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN);        // 设置对象容器内部 item 之间的列间距
    lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE);            // 取消滚动条

    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);          // 设置对象容器使用基于行的流失弹性布局flex，设置超出部分换行模式

    /**
     * 设置容器弹性模式
     * 1. 容器指针
     * 2. LV_FLEX_ALIGN_SPACE_EVENLY 均匀分部子元素之间的间距
     * 3. LV_FLEX_ALIGN_END          容器中每行所有的子元素底部对齐
     * 4. LV_FLEX_ALIGN_CENTER       容器中内容的子元素向容器中心对齐
    */
    lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_END, LV_FLEX_ALIGN_CENTER);