Flex（弹性布局） 描述

flex grow（弹性增长）

原理网上大把，我们直接说重点：

 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 //将子项放在一列中，不换行，但顺序相反

关键代码

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

举个例子

举例代码1

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

举例代码2

各个btn子元素间距均匀分部，和每行子元素底部对齐，两边距离容器边框25个像素，子元素的区域位置向容器中心对齐，并均匀分部。

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