在 LVGL 中,align_type
参数(类型为 lv_align_t
)定义了控件的对齐方式。以下是 LVGL 8.x/9.x 版本中所有可用的对齐方式及其含义:
对齐方式列表
对齐类型(枚举值) | 功能描述 |
---|---|
LV_ALIGN_DEFAULT | 默认对齐(等同于 LV_ALIGN_TOP_LEFT )。 |
LV_ALIGN_TOP_LEFT | 对齐到父容器的左上角。 |
LV_ALIGN_TOP_MID | 对齐到父容器的顶部中心(水平居中,垂直顶部)。 |
LV_ALIGN_TOP_RIGHT | 对齐到父容器的右上角。 |
LV_ALIGN_BOTTOM_LEFT | 对齐到父容器的左下角。 |
LV_ALIGN_BOTTOM_MID | 对齐到父容器的底部中心(水平居中,垂直底部)。 |
LV_ALIGN_BOTTOM_RIGHT | 对齐到父容器的右下角。 |
LV_ALIGN_LEFT_MID | 对齐到父容器的左侧中心(垂直居中,水平左侧)。 |
LV_ALIGN_RIGHT_MID | 对齐到父容器的右侧中心(垂直居中,水平右侧)。 |
LV_ALIGN_CENTER | 对齐到父容器的中心(水平和垂直均居中)。 |
对齐示意图
父容器边界
+---------------------------------+
| |
| TOP_LEFT TOP_MID TOP_RIGHT |
| +------------+------------+ |
| | | | |
| LEFT_MID CENTER RIGHT_MID |
| | | | |
| +------------+------------+ |
| BOTTOM_LEFT BOTTOM_MID BOTTOM_RIGHT |
| |
+---------------------------------+
使用示例
// 将控件对齐到父容器左上角,无偏移
lv_obj_align(obj, LV_ALIGN_TOP_LEFT, 0, 0);
// 将控件对齐到父容器右下角,并向右下各偏移 10px
lv_obj_align(obj, LV_ALIGN_BOTTOM_RIGHT, 10, 10);
// 将控件对齐到父容器中心,向上偏移 20px
lv_obj_align(obj, LV_ALIGN_CENTER, 0, -20);
关键细节
-
偏移量 (
x_offset
,y_offset
)- 正值:向右(
x_offset
)或向下(y_offset
)偏移。 - 负值:向左(
x_offset
)或向上(y_offset
)偏移。
- 正值:向右(
-
对齐基准
对齐的参考点是父容器的对应位置。例如:LV_ALIGN_TOP_LEFT
:父容器的左上角坐标(0, 0)
。LV_ALIGN_CENTER
:父容器的中心坐标(parent_width/2, parent_height/2)
。
-
动态布局
如果父容器大小变化(如屏幕旋转),需调用lv_obj_align()
重新对齐。
扩展用法
-
相对于其他对象对齐
若需相对于另一个对象对齐(而非父容器),使用lv_obj_align_to(obj, target_obj, align_type, x_offset, y_offset)
。 -
百分比偏移
LVGL 支持百分比单位(需配置LV_USE_PERCENTAGE
):// 向右偏移父容器宽度的 10%,向下偏移父容器高度的 20% lv_obj_align(obj, LV_ALIGN_CENTER, LV_PCT(10), LV_PCT(20));
掌握这些对齐方式可以高效实现复杂界面布局!如果需要更灵活的布局,建议结合 LVGL 的 Flex 布局 或 Grid 布局。