LVGL开发教程-Flex（弹性布局）

系列文章目录

知不足而奋进 望远山而前行

---

目录

系列文章目录

文章目录

前言

1.常用方法

2.代码实现

3.对齐方式

4.控件特殊的size

总结

---

前言

Flexbox布局在现代界面设计中扮演着重要角色，特别是在响应式和动态布局方面。LVGL（LittlevGL）作为一个轻量级图形库，通过其强大的Flex布局功能，使得用户能够轻松地管理和排列界面元素。本文将介绍如何在LVGL中利用Flexbox来创建灵活且适应性强的界面布局，涵盖了常用的方法、代码实现示例以及对齐方式的详细讨论。

---

 

Flexbox简称Flex,可以将项目排列成行或列,处理环绕，调整项目和轨道之间的间距，处理 grow 以使项目填充剩余空间的最小/最大宽度和高度。

要使对象 flex 容器调用 lv_obj_set_layout(obj, LV_LAYOUT_FLEX)。

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

1.常用方法

创建布局:

lv_obj_t * lv_obj_create(lv_obj_t * parent)

设置flex布局方式:

void lv_obj_set_flex_flow(lv_obj_t * obj, lv_flex_flow_t flow)

参数1:布局objects

参数2:布局方式,具体如下

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

2.代码实现

void flex_1(void)
{
    /*Create a container with ROW flex direction*/
    lv_obj_t * cont_row = lv_obj_create(lv_scr_act());
    lv_obj_set_size(cont_row, 240, 75);
    lv_obj_align(cont_row, LV_ALIGN_TOP_MID, 0, 5);
    lv_obj_set_flex_flow(cont_row, LV_FLEX_FLOW_ROW);

    /*Create a container with COLUMN flex direction*/
    lv_obj_t * cont_col = lv_obj_create(lv_scr_act());
    lv_obj_set_size(cont_col, 200, 200);
    lv_obj_align_to(cont_col, cont_row, LV_ALIGN_OUT_BOTTOM_MID, 0, 5);
    lv_obj_set_flex_flow(cont_col, LV_FLEX_FLOW_COLUMN);

    uint32_t i;
    for(i = 0; i < 10; i++) {
        lv_obj_t * obj;
        lv_obj_t * label;

        /*Add items to the row*/
        obj= lv_btn_create(cont_row);
        lv_obj_set_size(obj, 100, LV_PCT(100));

        label = lv_label_create(obj);
        lv_label_set_text_fmt(label, "Item: %u", i);
        lv_obj_center(label);

        /*Add items to the column*/
        obj = lv_btn_create(cont_col);
        lv_obj_set_size(obj, LV_PCT(100), LV_SIZE_CONTENT);

        label = lv_label_create(obj);
        lv_label_set_text_fmt(label, "Item: %"LV_PRIu32, i);
        lv_obj_center(label);
    }
}

 

3.对齐方式

lv_obj_align

设置在父控件中的对齐方式

lv_obj_align_to

设置与参考物对齐方式

void lv_obj_align_to(lv_obj_t * obj, const lv_obj_t * base, lv_align_t align, lv_coord_t x_ofs, lv_coord_t y_ofs)

obj相对于base的对齐方式

注意:LV_ALIGN_OUT_BOTTOM_MID和LV_ALIGN_BOTTOM_MID区别

4.控件特殊的size

固定的控件size有些情况下不能满足我们的需求,可以使用特殊的size来定义。

定义在lv_area.h头文件中。

LV_SIZE_CONTENT

包裹内容

LV_PCT(x)

设置成父控件大小的百分比

---

总结

本文详细介绍了LVGL中Flexbox布局的基本概念和实现方法。通过 lv_obj_set_layout(obj, LV_LAYOUT_FLEX) 来启用Flex布局，可以选择不同的布局方式如 LV_FLEX_FLOW_ROW 和 LV_FLEX_FLOW_COLUMN，以及它们的变体，如带有包裹和反向排列的方式。我们还展示了如何使用 lv_obj_align 和 lv_obj_align_to 函数来精确控制元素的对齐方式，以及如何利用特殊的size定义如 LV_SIZE_CONTENT 和 LV_PCT(x) 来适应各种布局需求。

通过这些技术，开发者可以在LVGL中实现高度定制化且动态变化的界面布局，从而提升用户体验和界面的可扩展性。Flexbox的灵活性使得界面元素能够根据不同设备和屏幕尺寸自适应，为应用程序的视觉和功能设计提供了强大的支持。