弹性流（flex-flow）的应用

接口说明

        在使用弹性布局时，需要考虑两个问题，第一个问题是排列时的方向及是否换行？第二个问题是排列时一行的元素如何放置、不同高度元素如何对齐及整个内容区域如何放置？

        第一个问题使用lv_obj_set_flex_flow（）接口即可，参数选择按行排列或者按行+换行排列即可。

        第二个问题使用lv_obj_set_flex_align（）接口，此接口有三个入口参数，宏定义相同，但作用不同，第一个参数负责改变每行元素的间距（参考效果三），第二个参数负责改变每行元素上下对齐的方式（参考效果四），第三个参数负责设置内容区域的位置（参考效果五）。

参数说明

        around与evenly两个参数的区别在于边间距的大小不同。

         between是紧靠边间距（默认值），为固定值。

效果一：5个大小不同的元素排列

 代码实现

    lv_obj_t *obj = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj,240,150);
    lv_obj_align(obj,LV_ALIGN_CENTER,0,0);
    lv_obj_clear_flag(obj,LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_flex_flow(obj,LV_FLEX_FLOW_ROW);

    lv_obj_t *btn1 = lv_btn_create(obj);
    lv_obj_set_size(btn1,80,20);
    lv_obj_t *label1 = lv_label_create(btn1);
    lv_label_set_text(label1,"01");

    lv_obj_t *btn2 = lv_btn_create(obj);
    lv_obj_set_size(btn2,80,40);
    lv_obj_t *label2 = lv_label_create(btn2);
    lv_label_set_text(label2,"02");

    lv_obj_t *btn3 = lv_btn_create(obj);
    lv_obj_set_size(btn3,80,80);
    lv_obj_t *label3 = lv_label_create(btn3);
    lv_label_set_text(label3,"03");

    lv_obj_t *btn4 = lv_btn_create(obj);
    lv_obj_set_size(btn4,80,50);
    lv_obj_t *label4 = lv_label_create(btn4);
    lv_label_set_text(label4,"04");

    lv_obj_t *btn5 = lv_btn_create(obj);
    lv_obj_set_size(btn5,80,80);
    lv_obj_t *label5 = lv_label_create(btn5);
    lv_label_set_text(label5,"05");

效果二：5个大小不同的元素排列+换行

代码实现

lv_obj_set_flex_flow(obj,LV_FLEX_FLOW_ROW);

效果三：元素在每行按照等间距方式排列

 代码实现

lv_obj_set_flex_align(obj,LV_FLEX_ALIGN_SPACE_EVENLY,0,0);

  效果四：不同高度的元素底部对齐

代码实现

lv_obj_set_flex_align(obj,LV_FLEX_ALIGN_SPACE_EVENLY,LV_FLEX_ALIGN_END,0);

效果五：内容居中显示

代码实现

lv_obj_set_flex_align(obj,LV_FLEX_ALIGN_SPACE_EVENLY,LV_FLEX_ALIGN_END,LV_FLEX_ALIGN_CENTER);