LVGL8学习之row and a column layout with flexbox

这一篇来学习一下基于flexbox（柔性盒子）简单行和列布局，还是通过codeblock来模拟代码的运行，可设置layout对象内部的水平和竖直填充，以及布局内各item之间的间隔填充

代码如下：

void lv_flex_layout_test()
{
    lv_obj_t * container_row1 = lv_obj_create(lv_scr_act()); // 创建一个对象container_row1
    if (container_row1 == NULL)
    {
        return;
    }

    lv_obj_set_size(container_row1, 500, 75); // 设置对象大小
    lv_obj_align(container_row1, LV_ALIGN_TOP_MID, 0, 5); // 设置对象基于屏幕中间对齐
    lv_obj_set_flex_flow(container_row1, LV_FLEX_FLOW_ROW); // 设置对象使用基于行的流失弹性布局flex

    lv_obj_t * container_row2 = lv_obj_create(lv_scr_act()); // 创建一个对象container_row2
    if (container_row2 == NULL)
    {
        return;
    }

    lv_obj_set_size(container_row2, 500, 75); // 设置对象大小
    // 设置对象container_row2基于对象container_row1外部下方中间对齐
    lv_obj_align_to(container_row2, container_row1, LV_ALIGN_OUT_BOTTOM_MID, 0, 20);
    lv_obj_set_flex_flow(container_row2, LV_FLEX_FLOW_ROW); // 设置对象使用基于行的流失弹性布局flex
    lv_obj_set_style_pad_ver(container_row2, 0, 0); // 设置对象内部水平方向的填充为0
    lv_obj_set_style_pad_row(container_row2, 0, 0);  // 设置对象container_row2内部item之间的行间距填充为0
    lv_obj_set_style_pad_column(container_row2, 1, 0); // 设置对象container_row2内部item之间的列间距填充为1


    /*Create a container with COLUMN flex direction*/
    lv_obj_t * container_col1 = lv_obj_create(lv_scr_act());
    if (container_col1 == NULL)
    {
        return ;
    }

    lv_obj_set_size(container_col1, 100, 250); // 设置对象大小
      // 设置对象container_col1基于对象container_row2外部下方中间对齐
    lv_obj_align_to(container_col1, container_row2, LV_ALIGN_OUT_BOTTOM_MID, -100, 20);
    lv_obj_set_flex_flow(container_col1, LV_FLEX_FLOW_COLUMN); // 设置对象使用基于列的流失弹性布局flex

    lv_obj_t * container_col2 = lv_obj_create(lv_scr_act());
    if (container_col2 == NULL)
    {
        return ;
    }

    lv_obj_set_size(container_col2, 100, 250); // 设置对象大小
    // 设置对象container_col2基于对象container_row2外部下方中间对齐
    lv_obj_align_to(container_col2, container_row2, LV_ALIGN_OUT_BOTTOM_MID, 100, 20);
    lv_obj_set_flex_flow(container_col2, LV_FLEX_FLOW_COLUMN);  // 设置对象使用基于列的流失弹性布局flex
    lv_obj_set_style_pad_hor(container_col2, 0, 0);  // 设置对象内部垂直方向的填充为0
    lv_obj_set_style_pad_row(container_col2, 1, 0); // 设置对象container_col2内部item之间的行间距填充为1
    lv_obj_set_style_pad_column(container_col2, 0, 0); // 设置对象container_col2内部item之间的列间距填充为0


    int i = 0;
    lv_obj_t * obj = NULL;
    lv_obj_t * label = NULL;

    static lv_style_t btn_style;
    lv_style_init(&btn_style); // 初始化样式
    lv_style_set_radius(&btn_style, 0); // 设置样式圆角为0

    for(i = 0; i < 10; i++)
    {
        obj = lv_btn_create(container_row1); // 基于container_row1对象添加button对象
        if (obj != NULL)
        {
            lv_obj_set_size(obj, 100, LV_PCT(100)); // 设置对象大小

            label = lv_label_create(obj); // 创建按键对象创建label对象
            if (label != NULL)
            {
                lv_label_set_text_fmt(label, "Item: %d", i); // 设置label文本
                lv_obj_center(label); // label对象居中显示
            }
        }
    }

    for(i = 0; i < 4; i++)
    {
        obj= lv_btn_create(container_row2);
        if (obj != NULL)
        {
            lv_obj_set_size(obj, 100, LV_PCT(100));
            lv_obj_add_style(obj, &btn_style, 0);

            label = lv_label_create(obj);
            if (label != NULL)
            {
                lv_label_set_text_fmt(label, "Item: %d", i);
                lv_obj_center(label);
            }
        }
    }

    for(i = 0; i < 10; i++)
    {
        obj = lv_btn_create(container_col1);
        if (obj != NULL)
        {
            lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);

            label = lv_label_create(obj);
            if (label != NULL)
            {
                lv_label_set_text_fmt(label, "Item: %d", i);
                lv_obj_center(label);
            }
        }
    }

    for(i = 0; i < 4; i++)
    {
        obj = lv_btn_create(container_col2);
        if (obj != NULL)
        {
            lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);
            lv_obj_add_style(obj, &btn_style, 0);

            label = lv_label_create(obj);
            if (label != NULL)
            {
                lv_label_set_text_fmt(label, "Item: %d", i);
                lv_obj_center(label);
            }
        }
    }
}

运行效果：

参考文献：CSS flexbox 布局综合指南