系列文章目录
知不足而奋进 望远山而前行
目录
系列文章目录
文章目录
前言
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的灵活性使得界面元素能够根据不同设备和屏幕尺寸自适应，为应用程序的视觉和功能设计提供了强大的支持。
