您的当前位置:首页正文

【LVGL】弹性布局(Flex)学习

2024-11-11 来源:个人技术集锦

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);

形参说明:

  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

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

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

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

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

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

/**
 * 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,				//表示水平和底部垂直
    LV_FLEX_ALIGN_CENTER,			//只是居中
    LV_FLEX_ALIGN_SPACE_EVENLY,		//项目是分布的,因此任意两个项目之间的间距(以及到边缘的空间)是相等的。 不适用于 track_cross_place
    LV_FLEX_ALIGN_SPACE_AROUND,		//项目均匀分布在轨道中,它们周围的空间相等。 请注意,视觉上的空间并不相等,因为所有项目的两侧都有相等的空间。 第一个项目将与容器边缘有一个单位的空间,但下一个项目之间有两个单位的空间,因为下一个项目有自己的适用间距。 不适用于track_cross_place
    LV_FLEX_ALIGN_SPACE_BETWEEN,	// 项目均匀分布在轨道中:第一个项目在开始线上,最后一个项目在结束线上。 不适用于track_cross_place。
} lv_flex_align_t;

举例1:

所有btn子元素都距离容器25个像素,各个btn子元素间距均匀分部,和底部对齐

    lv_obj_t* cont = lv_obj_create(lv_scr_act());               // 创建一个对象容器 cont
    lv_obj_set_size(cont, 400, 200);                            // 设置对象容器大小
    lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 5);                 // 设置对象容器基于屏幕中间对齐
    lv_obj_set_style_pad_all(cont, 25, LV_PART_MAIN);           // 设置对象容器内部 item 与容器边的上下左右间距
    //lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN);           // 设置对象容器内部 item 之间的行间距
    //lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN);        // 设置对象容器内部 item 之间的列间距
    lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE);            // 取消滚动条

    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);          // 设置对象容器使用基于行的流失弹性布局flex,设置超出部分换行模式

    /**
     * 设置容器弹性模式
     * 1. 容器指针
     * 2. LV_FLEX_ALIGN_SPACE_EVENLY 均匀分部子元素之间的间距
     * 3. LV_FLEX_ALIGN_END 容器中所有的子元素底部对齐
     * 4. 默认0
    */
    lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_END, 0);

举例2:
各个btn子元素间距均匀分部,和每行子元素底部对齐,两边距离容器边框25个像素,子元素的区域位置向容器中心对齐,并均匀分部。

    lv_obj_t* cont = lv_obj_create(lv_scr_act());               // 创建一个对象容器 cont
    lv_obj_set_size(cont, 350, 420);                            // 设置对象容器大小
    lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 5);                 // 设置对象容器基于屏幕中间对齐
    lv_obj_set_style_pad_all(cont, 25, LV_PART_MAIN);           // 设置对象容器内部 item 与容器边的上下左右间距
    //lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN);           // 设置对象容器内部 item 之间的行间距
    //lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN);        // 设置对象容器内部 item 之间的列间距
    lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE);            // 取消滚动条

    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);          // 设置对象容器使用基于行的流失弹性布局flex,设置超出部分换行模式

    /**
     * 设置容器弹性模式
     * 1. 容器指针
     * 2. LV_FLEX_ALIGN_SPACE_EVENLY 均匀分部子元素之间的间距
     * 3. LV_FLEX_ALIGN_END          容器中每行所有的子元素底部对齐
     * 4. LV_FLEX_ALIGN_CENTER       容器中内容的子元素向容器中心对齐
    */
    lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_END, LV_FLEX_ALIGN_CENTER);

举例3:
各个btn子元素间距均匀分部,和每行子元素底部对齐,子元素的区域位置向容器顶部对齐并距离顶边和两边25个像素,并均匀分部。

    lv_obj_t* cont = lv_obj_create(lv_scr_act());               // 创建一个对象容器 cont
    lv_obj_set_size(cont, 350, 420);                            // 设置对象容器大小
    lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 5);                 // 设置对象容器基于屏幕中间对齐
    lv_obj_set_style_pad_all(cont, 25, LV_PART_MAIN);           // 设置对象容器内部 item 与容器边的上下左右间距
    //lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN);           // 设置对象容器内部 item 之间的行间距
    //lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN);        // 设置对象容器内部 item 之间的列间距
    lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE);            // 取消滚动条

    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);          // 设置对象容器使用基于行的流失弹性布局flex,设置超出部分换行模式

    /**
     * 设置容器弹性模式
     * 1. 容器指针
     * 2. LV_FLEX_ALIGN_SPACE_EVENLY 均匀分部子元素之间的间距
     * 3. LV_FLEX_ALIGN_END          容器中所有的子元素底部对齐
     * 4. LV_FLEX_ALIGN_CENTER       容器中内容的子元素向容器顶部对齐
    */
    lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_END, LV_FLEX_ALIGN_START);

以下来自其它参考图片图片

lv_obj_set_flex_align 参数4,参考图片

lv_obj_set_flex_align 参数2和参数3,参考图片

下笔如有神

测试案例:

static lv_style_t style_label;
static lv_obj_t* cont;
static lv_obj_t* cont_main;


LV_FONT_DECLARE(myFontOrbitron_18);



void test_demo(void)
{

    lv_obj_t* cont = lv_obj_create(lv_scr_act());               // 创建一个对象容器 cont
    lv_obj_set_size(cont, 350, 420);                            // 设置对象容器大小
    lv_obj_align(cont, LV_ALIGN_TOP_MID, 0, 5);                 // 设置对象容器基于屏幕中间对齐
    lv_obj_set_style_pad_all(cont, 25, LV_PART_MAIN);           // 设置对象容器内部 item 与容器边的上下左右间距
    //lv_obj_set_style_pad_row(cont, 10, LV_PART_MAIN);           // 设置对象容器内部 item 之间的行间距
    //lv_obj_set_style_pad_column(cont, 10, LV_PART_MAIN);        // 设置对象容器内部 item 之间的列间距
    lv_obj_clear_flag(cont, LV_OBJ_FLAG_SCROLLABLE);            // 取消滚动条

    lv_obj_set_flex_flow(cont, LV_FLEX_FLOW_ROW_WRAP);          // 设置对象容器使用基于行的流失弹性布局flex,设置超出部分换行模式

    /**
     * 设置容器弹性模式
     * 1. 容器指针
     * 2. LV_FLEX_ALIGN_SPACE_EVENLY 均匀分部子元素之间的间距
     * 3. LV_FLEX_ALIGN_END          容器中所有的子元素底部对齐
     * 4. LV_FLEX_ALIGN_CENTER       容器中内容的子元素向容器中心对齐
    */
    lv_obj_set_flex_align(cont, LV_FLEX_ALIGN_SPACE_EVENLY, LV_FLEX_ALIGN_END, LV_FLEX_ALIGN_START);




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

    lv_obj_t* btn1 = lv_btn_create(cont);                // 基于cont对象添加button对象
    lv_obj_set_size(btn1, 100, 80);                       // 设置对象大小

    lv_obj_t* btn1_label = lv_label_create(btn1);        // 创建按键对象创建label对象
    lv_label_set_text(btn1_label, "Btn1");               // 设置label文本
    lv_obj_center(btn1_label);                           // label对象居中显示
    lv_obj_add_style(btn1, &btn_style, LV_PART_MAIN);    // 配置样式

    lv_obj_t* btn2 = lv_btn_create(cont);                // 基于cont对象添加button对象
    lv_obj_set_size(btn2, 80, 110);                      // 设置对象大小

    lv_obj_t* btn2_label = lv_label_create(btn2);        // 创建按键对象创建label对象
    lv_label_set_text(btn2_label, "Btn2");               // 设置label文本
    lv_obj_center(btn2_label);                           // label对象居中显示
    lv_obj_add_style(btn2, &btn_style, LV_PART_MAIN);    // 配置样式

    lv_obj_t* btn3 = lv_btn_create(cont);                // 基于cont对象添加button对象
    lv_obj_set_size(btn3, 45, 30);                       // 设置对象大小

    lv_obj_t* btn3_label = lv_label_create(btn3);        // 创建按键对象创建label对象
    lv_label_set_text(btn3_label, "Btn3");               // 设置label文本
    lv_obj_center(btn3_label);                           // label对象居中显示
    lv_obj_add_style(btn3, &btn_style, LV_PART_MAIN);    // 配置样式

    lv_obj_t* btn4 = lv_btn_create(cont);                // 基于cont对象添加button对象
    lv_obj_set_size(btn4, 60, 35);                       // 设置对象大小

    lv_obj_t* btn4_label = lv_label_create(btn4);        // 创建按键对象创建label对象
    lv_label_set_text(btn4_label, "Btn4");               // 设置label文本
    lv_obj_center(btn4_label);                           // label对象居中显示
    lv_obj_add_style(btn4, &btn_style, LV_PART_MAIN);    // 配置样式

    lv_obj_t* btn5 = lv_btn_create(cont);                // 基于cont对象添加button对象
    lv_obj_set_size(btn5, 70, 50);                       // 设置对象大小

    lv_obj_t* btn5_label = lv_label_create(btn5);        // 创建按键对象创建label对象
    lv_label_set_text(btn5_label, "Btn5");               // 设置label文本
    lv_obj_center(btn5_label);                           // label对象居中显示
    lv_obj_add_style(btn5, &btn_style, LV_PART_MAIN | LV_STATE_PRESSED);    // 配置样式
}



Top