所有的对齐方式

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

关键细节

  1. 偏移量 (x_offset, y_offset)

    • 正值:向右(x_offset)或向下(y_offset)偏移。
    • 负值:向左(x_offset)或向上(y_offset)偏移。
  2. 对齐基准
    对齐的参考点是父容器的对应位置。例如:

    • LV_ALIGN_TOP_LEFT:父容器的左上角坐标 (0, 0)
    • LV_ALIGN_CENTER:父容器的中心坐标 (parent_width/2, parent_height/2)
  3. 动态布局
    如果父容器大小变化(如屏幕旋转),需调用 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 布局

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

九层指针

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值