LVGL V8之style实现flow row布局

flow row布局实现

static void lv_example_flex_2(void)
{
    static lv_style_t style;
    lv_style_init(&style);  //初时化style
    lv_style_set_flex_flow(&style, LV_FLEX_FLOW_ROW_WRAP);//设置水平内容包裹flow风格
    lv_style_set_flex_main_place(&style, LV_FLEX_ALIGN_SPACE_EVENLY);//设置平均分配空间风格
    lv_style_set_layout(&style, LV_LAYOUT_FLEX); //设置flex布局
    lv_obj_t* cont = lv_obj_create(lv_scr_act()); //创建对象
    lv_obj_set_size(cont, 300, 220); // 设置大小
    lv_obj_center(cont);  //居中显示
    lv_obj_add_style(cont, &style, 0); // 添加style
    uint32_t i;
    for (i = 0; i < 8; i++) {
        lv_obj_t* obj = lv_obj_create(cont); 　//创建对象
        lv_obj_set_size(obj, 70, LV_SIZE_CONTENT);// 设置大小
        lv_obj_t* label = lv_label_create(obj);//创建label对象
        lv_label_set_text_fmt(label, "%d", i); //设置显示内容
        lv_obj_center(label);　//居中显示
    }
}

效果图

• 注释掉lv_style_set_flex_main_place(&style, LV_FLEX_ALIGN_SPACE_EVENLY);
  
• 修改lv_style_set_flex_main_place(&style, LV_FLEX_ALIGN_END);