lvgl8.2 组件布局方式

1. 弹性布局

1.1 弹性布局简介

弹性布局可以将组件按行或按列排列，处理环绕调整项目和轨道之间的间距，处理 增长以使组件填充相对于 最小/最大宽度 和 高度 的剩余空间。 这种布局方式类似 java 图形界面框架 javaFX 的 HBox 和 VBox 布局方式。javaFX 的 HBox 和 VBox 布局方式如下图所示：

但是相比 javaFX 的 HBox 和 VBox 布局 lvgl 的弹性布局不仅支持水平排列同时支持垂直纵向排列，所以严格意义来说 lvgl 的弹性布局与 javaFX的 FlowPane 布局更加相近，javaFX的 FlowPane 布局如下所示：

1.2 开启弹性布局

要使用弹性布局需要在配置文件 lv_conf.h 中启用 LV_USE_FLEX 宏定义，否则使用弹性布局相关的内容将提示未定义的类型。

1.3 弹性布局配置项

轨道：想要将组件按行或按列进行排列。
主方向：行排列方向或列排列方向，组件放置或排序的方向 。
横向：垂直于主方向。
wrap：如果轨道中没有更多空间，则开始新轨道（新的一行或新的一列），换句话说就是在一行无法放下所有组件时自动换行，或一列无法放下所有组件时自动换列。
增长：如果设置在一个项目上，它将增长以填充轨道上的剩余空间。 可用空间将根据它们的增长值分配给项目（值越大意味着空间越大）
间隙：组件按行排列或按列排列时，轨道上所布局的组件它们之间的空隙。

1.4 在哪里使用弹性布局

简单来说，可以在任何父级上设置 Flex（弹性） 布局。比如希望在一个容器中放置一些按钮并且希望这些按钮按行进行排列，这时就可以给这个容器设置弹性布局，并将按钮添加到弹性布局中，按钮添加好后按钮就自动按行排列并且自动均匀分配好各自所需的空间（即宽度）。

不仅仅可以给容器设置布局，也可以给按钮，标签设置布局，在这一方面 lvgl 并没有限制，简单说只要这个组件作为父组件，就可以给这个组件设置布局。
比如可以给按钮设置布局，让这个按钮上可以放置两个标签（label）。

1.5 给父组件设置弹性布局

给父组件设置弹性布局使用函数接口 lv_obj_set_flex_flow(obj, flex_flow) 其中
obj 是父组件
flex_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.6 设置弹性布局对齐方式

管理子组件的对齐方式使用函数接口 lv_obj_set_flex_align(obj, main_place, cross_place, track_cross_place)
main_place 确定如何在主轴上的轨道上分配组件。 例如，将组件向右冲洗 LV_FLEX_FLOW_ROW_WRAP
cross_place 确定如何在横轴上的轨道上分配组件。 例如，如果所放组件具有不同的高度，请将它们放在轨道的底部。
track_cross_place 确定如何分配轨道

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

1.7 弹性布局弹性增长

flex grow 可用于让一个或多子组件填充轨道上的可用空间。 如果有更多的子组件增长，可用空间将按增长值按比例分配。 例如我们有 400 px 剩余空间和 4 个增长对象，分别为 A，B，C
A 随着增长 = 1
B 随着增长 = 1
C 随着增长 = 2
A 和 B 将有 100 px 大小，并且 C 将有 200 像素大小。

flex grow 可以设置在子组件身上 lv_obj_set_flex_flow(child, value) value 需要 大于 1，如果为 0 将禁用子组件的增长。

从上图可以看出，弹性增长可以让不同的子组件拥有不同的框度分布（填充）在轨道上，而不是让所有子组件均分轨道宽度。

1.8 像使用风格一样使用布局

所有与 Flex 相关的值都是底层的样式属性，您可以像使用任何其他样式属性一样使用它们。 存在以下与 flex 相关的样式属性：
FLEX_FLOW
FLEX_MAIN_PLACE
FLEX_CROSS_PLACE
FLEX_TRACK_PLACE
FLEX_GROW

1.9 RTL （Right To Left）

如果容器的基本方向设置为 LV_BASE_DIR_RTL 的含义 LV_FLEX_ALIGN_START 和 LV_FLEX_ALIGN_END 被换上 ROW 布局。 IE START 将意味着右边。
最终效果为 ROW 布局和 COLUMN 布局将从右到左放置。
设置基本方向使用函数 lv_obj_set_style_base_dir(cont, LV_BASE_DIR_LTR, 0)

2. 网格布局

2.1 网格布局简介

网格布局可以将项目排列到具有行或列（轨道）的二维表中。 该项目可以跨越多个列或行。 轨道的大小可以以像素为单位设置，最大的项目（ LV_GRID_CONTENT) 或在空闲单元(FR) 中按比例分配空闲空间。

2.2 开启网格布局

要使用弹性布局需要在配置文件 lv_conf.h 中启用 LV_USE_GRID 宏定义，否则使用弹性布局相关的内容将提示未定义的类型。

2.3 网格布局配置项

轨道：行或列
自由单元（FR）：如果设置在轨道的大小设置为 FR它将增长以填充父级的剩余空间。
间隙：行和列或轨道上的项目之间的空间

2.4 在哪里使用网格布局

简单来说，可以在任何父级上设置 Gid（网格） 布局。比如希望在一个容器中放置一些按钮并且希望这些按钮按照网格式进行排布，这时就可以给这个容器设置网格布局，并将按钮添加到网格布局中，按钮添加好后按钮就自动按照网格式进行排列了。

不仅仅可以给容器设置布局，也可以给按钮，标签设置布局，在这一方面 lvgl 并没有限制，简单说只要这个组件作为父组件，就可以给这个组件设置布局。

2.5 网格描述符

需要描述行和列的大小。 可以通过声明 2 个数组和其中的轨道大小来完成。 最后一个元素必须是 LV_GRID_TEMPLATE_LAST，比如像下面这样

static lv_coord_t column_dsc[] = {100, 400, LV_GRID_TEMPLATE_LAST};   /*2 columns with 100 and 400 ps width*/
static lv_coord_t row_dsc[] = {100, 100, 100, LV_GRID_TEMPLATE_LAST}; /*3 100 px tall rows*/

除了以像素为单位的简单设置之外，您还可以使用两个特殊值：
LV_GRID_CONTENT 将宽度设置为此轨道上最大的孩子（格子宽度以宽度最大的组件宽度为基准，即类似 windows excel 表格的自动调整列宽功能）
LV_GRID_FR(X) 告诉该轨道应使用剩余空间的哪一部分。 值越大，空间越大。

描述数组定义好后即可将描述数组添加到父组件中 v_obj_set_grid_dsc_array(obj, col_dsc, row_dsc)

2.6 将子组件添加到父组件网格中

默认情况下，子组件不会添加到网格中，它们需要手动添加到单元格中。
手动将子组件添加到网格中使用 lv_obj_set_grid_cell(child, column_align, column_pos, column_span, row_align, row_pos, row_span) 函数。

参数 column_align 和 row_align 确定如何对齐其单元格中的子组件。
LV_GRID_ALIGN_START 表示在水平方向左上和垂直上方向上。 （默认）
LV_GRID_ALIGN_END 表示在水平方向右侧和垂直底部
LV_GRID_ALIGN_CENTER 简单地居中

参数 colum_pos 和 row_pos 表示应放置从零开始的单元格索引到项目中。

参数 colum_span 和 row_span 表示该项目应从起始单元格开始涉及多少个轨道。 必须 > 1。

2.7 网格布局对齐方式

LV_GRID_ALIGN_START 表示在水平方向左上和垂直上方向上。 （默认）
LV_GRID_ALIGN_END 表示在水平方向右侧和垂直底部
LV_GRID_ALIGN_CENTER 简单居中
LV_GRID_ALIGN_SPACE_EVENLY 对项进行分布，以使任意两个项之间的间距（以及边缘的间距）相等，不适用于track_cross_place。
LV_GRID_ALIGN_SPACE_AROUND 项目在轨道上均匀分布，周围空间相等。 请注意，视觉上的空间是不相等的，因为所有项目的两边都有相等的空间。 第一个项目将在容器边缘有一个空间单位，但下一个项目之间有两个空间单位，因为下一个项目有自己的适用间距。 不适用于 track_cross_place
LV_GRID_ALIGN_SPACE_BETWEEN 项目在轨道上均匀分布：第一个项目在开始行，最后一个项目在结束行。 不适用于 track_cross_place.

要设置轨道的对齐方式，使用 lv_obj_set_grid_align(obj, column_align, row_align) 函数

2.8 使用样式一样使用布局

所有与 Grid 相关的值都是样式属性，您可以像使用任何其他样式属性一样使用它们。 存在以下与 Grid 相关的样式属性：

GRID_COLUMN_DSC_ARRAY
GRID_ROW_DSC_ARRAY
GRID_COLUMN_ALIGN
GRID_ROW_ALIGN
GRID_CELL_X_ALIGN
GRID_CELL_COLUMN_POS
GRID_CELL_COLUMN_SPAN
GRID_CELL_Y_ALIGN
GRID_CELL_ROW_POS
GRID_CELL_ROW_SPAN

2.9 RTL （Right To Left）

如果容器的基本方向设置为 LV_BASE_DIR_RTL， 的含义 LV_GRID_ALIGN_START 和 LV_GRID_ALIGN_END 被交换。 IE START 将意味着最右边。
最终效果为，列将从右到左放置。
设置基本方向使用函数 lv_obj_set_style_base_dir(cont, LV_BASE_DIR_LTR, 0)