这一篇来学习Flex布局的把项目按行包裹,且让他们周围的控件平均。(Arrange items in rows with wrap and even spacing),还是通过codeblock来模拟代码的运行,代码如下:

void lv_flex_layout_test2()
{
    static lv_style_t style;
    lv_style_init(&style); // 初始化style
    lv_style_set_layout(&style, LV_LAYOUT_FLEX); // 给style添加flex弹性布局
    lv_style_set_flex_flow(&style, LV_FLEX_FLOW_ROW_WRAP); // 包裹子控件按行排列
    lv_style_set_flex_main_place(&style, LV_FLEX_ALIGN_SPACE_EVENLY); // 任意两个项目(以及边缘的空间)之间的间距相等

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

    lv_obj_set_size(cont, 300, 240); // 设置容器对象的大小
    lv_obj_center(cont); // 容器对象屏幕居中显示
    lv_obj_add_style(cont, &style, 0); // 给容器对象添加style

    static lv_style_t obj_style;
    lv_style_init(&obj_style); // 初始化样式
    lv_style_set_radius(&obj_style, 5); // 设置按钮样式圆角弧度
    lv_style_set_bg_opa(&obj_style, LV_OPA_COVER); // 设置背景的透明度
    lv_style_set_bg_color(&obj_style, lv_palette_lighten(LV_PALETTE_BLUE, 2)); //设置背景色
    lv_style_set_border_color(&obj_style, lv_palette_darken(LV_PALETTE_GREEN, 2)); // 设置边框颜色
    lv_style_set_border_width(&obj_style, 3); // 设置边框宽度

    int i = 0;
    for(i = 0; i < 8; i++)
    {
        lv_obj_t * obj = lv_obj_create(cont);
        if (obj != NULL)
        {
            lv_obj_set_size(obj, 70, LV_SIZE_CONTENT); // 设置对象大小
            lv_obj_add_style(obj, &obj_style, 0); // 给对象添加样式

            lv_obj_t * label = lv_label_create(obj);
            if (label != NULL)
            {
                lv_label_set_text_fmt(label, "%d", i); // 设置文本
                lv_obj_center(label);
            }
        }
    }
}

运行效果:

 

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐