【LVGL】弹性布局（Flex）学习

Flex（弹性布局）

概述：

1. 弹性布局（Flex）可以调整父级中所有的子元素所排列的位置，例如：成行排列、成列排列；
2. 可以调整不同高度和不同宽度的子元素如何排列和放置
3. 排列时是否可以换行

所在目录：src\extra\layouts\flex

/**
 * Set hot the item should flow
 * @param flex pointer to a flex layout descriptor
 * @param flow an element of `lv_flex_flow_t`.
 */
void lv_obj_set_flex_flow(lv_obj_t * obj, lv_flex_flow_t flow);

请注意，LVGL 的 flex 布局功能需要通过 lv_conf.h 中的 LV_USE_FLEX 全局启用。

形参说明：

1. obj ：指向需要弹性布局的控件指针或者容器指针
2. flow ：

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

举例1： LV_FLEX_FLOW_ROW ：

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

举例2： LV_FLEX_FLOW_COLUMN：

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

举例3： LV_FLEX_FLOW_ROW_WRAP：

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

举例4： LV_FLEX_FLOW_COLUMN_WRAP：

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

举例5： LV_FLEX_FLOW_ROW_REVERSE：

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

以下三种只是顺序反了，不在举例
LV_FLEX_FLOW_COLUMN_REVERSE
LV_FLEX_FLOW_ROW_WRAP_REVERSE
LV_FLEX_FLOW_COLUMN_WRAP_REVERSE

设置如何放置(在哪里对齐)项目和轨道

/**
 * Set how to place (where to align) the items and tracks
 * @param flex pointer: to a flex layout descriptor
 * @param main_place where to place the items on main axis (in their track). Any value of `lv_flex_align_t`.
 * @param cross_place where to place the item in their track on the cross axis. `LV_FLEX_ALIGN_START/END/CENTER`
 * @param track_place where to place the tracks in the cross direction. Any value of `lv_flex_align_t`.
 */
void lv_obj_set_flex_align(lv_obj_t * obj, lv_flex_align_t main_place, lv_flex_align_t cross_place,
                           lv_flex_align_t track_cross_place);

函数说明：

设置子元素集在父级中的轨道分布和对齐方式

形参说明：

1. 父级对象指针
2. 负责改变每行元素的间距（ 确定如何在主轴上的轨道中分布项目）
3. 改变每行元素上下对齐的方式（确定如何在横轴上的轨道中分布项目）
4. 设置内容区域的位置（确定如何分配轨道，注意：LV_FLEX_ALIGN_SPACE_EVENLY LV_FLEX_ALIGN_SPACE_AROUND LV_FLEX_ALIGN_SPACE_BETWEEN 无法使用）

lv_flex_align_t ：

typedef enum {
   
    LV_FLEX_ALIGN_START,			//表示在水平方向和垂直方向的顶部左侧。 （默认）
    LV_FLEX_ALIGN_END,