LVGL学习-对齐

NULL_1969

已于 2022-05-12 19:01:44 修改

阅读量1.5w

点赞数 15

分类专栏： lvgl 文章标签： lv_obj_align lvgl 对齐对象

于 2022-05-12 18:47:49 首次发布

本文链接：https://blog.csdn.net/sinat_36568888/article/details/124736930

版权

lvgl 专栏收录该内容

3 篇文章

订阅专栏

1、algin

lvgl中，对象之间的对齐大的分为两种，一种内部对齐，一种外部对齐。各种对齐方式如下图。
在这里插入图片描述

2.对齐函数

2.1 lv_obj_align()

该函为与父对象内部对齐。

    lv_obj_t *parent = lv_obj_create(lv_scr_act());
    lv_obj_set_size(parent,100,100);
    lv_obj_set_style_bg_color(parent,lv_palette_main(LV_PALETTE_BLUE),0);
    lv_obj_align(parent,LV_ALIGN_CENTER,0,0);

    lv_obj_t *child = lv_obj_create(parent);
    lv_obj_set_size(child,50,50);
    lv_obj_set_style_bg_color(child,lv_palette_main(LV_PALETTE_GREEN),0);
    lv_obj_align(child,LV_ALIGN_CENTER,0,0);

以上代码为两个方块居中对齐

在这里插入图片描述
运行结果如上。
lv_obj_align最后两个参数分别是x和y轴的偏移量。x为正，向右偏移若干像素；x为负，向左偏移若干像素。y为正，向下偏移若干像素；y为负，向上偏移若干像素。

2.2 lv_obj_align_to

该函数为不同对象之间的对齐。具体示例如下：

外部居中对齐

    lv_obj_t *parent = lv_obj_create(lv_scr_act());
    lv_obj_set_size(parent,100,100);
    lv_obj_set_style_bg_color(parent,lv_palette_main(LV_PALETTE_BLUE),0);
    lv_obj_align(parent,LV_ALIGN_CENTER,0,0);

    lv_obj_t *child = lv_obj_create(lv_scr_act());
    lv_obj_set_size(child,50,50);
    lv_obj_set_style_bg_color(child,lv_palette_main(LV_PALETTE_GREEN),0);
    lv_obj_align_to(child,parent,LV_ALIGN_OUT_BOTTOM_MID,0,0);

child与parent中对齐，parent在上面，运行结果如下
在这里插入图片描述
内部居中对齐

    lv_obj_t *parent = lv_obj_create(lv_scr_act());
    lv_obj_set_size(parent,100,100);
    lv_obj_set_style_bg_color(parent,lv_palette_main(LV_PALETTE_BLUE),0);
    lv_obj_align(parent,LV_ALIGN_CENTER,0,0);

    lv_obj_t *child = lv_obj_create(lv_scr_act());
    lv_obj_set_size(child,50,50);
    lv_obj_set_style_bg_color(child,lv_palette_main(LV_PALETTE_GREEN),0);
    lv_obj_align_to(child,parent,LV_ALIGN_BOTTOM_MID,0,0);

运行结果如下：
在这里插入图片描述
可以看到，绿色和蓝色方块还是相距了一定的空间。这个空间为pading距离。一个lvgl对象拥有2个边沿
外边沿outline
边沿border

可以看到在第一个居中对齐例子里，二者没有完全贴合，中间有一段距离。这个距离就是outline。
下图为lvgl默认的距离。
在这里插入图片描述

想要完全贴合怎么处理呢。针对padding border outline都有函数可以处理.
padding函数

lv_obj_set_style_pad_all(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)
/*这个函数是设置4个padding距离*/
lv_obj_set_style_pad_left(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)
/*这个函数是设置左边padding距离*/

其他边设置函数类似。

    lv_obj_t *parent = lv_obj_create(lv_scr_act());
    lv_obj_set_size(parent,100,100);
    lv_obj_set_style_pad_all(parent,0,0);
    lv_obj_set_style_bg_color(parent,lv_palette_main(LV_PALETTE_BLUE),0);
    lv_obj_align(parent,LV_ALIGN_CENTER,0,0);

    lv_obj_t *child = lv_obj_create(lv_scr_act());
    lv_obj_set_size(child,50,50);
    lv_obj_set_style_bg_color(child,lv_palette_main(LV_PALETTE_GREEN),0);
    lv_obj_align_to(child,parent,LV_ALIGN_BOTTOM_MID,0,0);

将padding距离设置为0 ，可以看到两个对象已经完全贴合了

在这里插入图片描述

对齐还有其他函数，这两个函数最为关键。

3.对齐的坑

对齐函数要放到确定对象大小函数的后面，否则居中对齐会出问题。对于label对象，对齐函数要放到设置了label内容函数之后。

在确定对象大小函数前使用对齐函数。

    lv_obj_t *parent = lv_obj_create(lv_scr_act());
    lv_obj_set_size(parent,100,100);
    lv_obj_set_style_bg_color(parent,lv_palette_main(LV_PALETTE_BLUE),0);
    lv_obj_align(parent,LV_ALIGN_CENTER,0,0);

    lv_obj_t *child = lv_obj_create(lv_scr_act());
    lv_obj_align_to(child,parent,LV_ALIGN_OUT_BOTTOM_MID,0,0);
    lv_obj_set_size(child,50,50);
    lv_obj_set_style_bg_color(child,lv_palette_main(LV_PALETTE_GREEN),0);

这个函数在child对象还没有设置大小前，就设置了与parent对象对齐。结果如下：
在这里插入图片描述
可以看到，并没有进行居中对齐。这个教训一定要切记，今天在搞label对齐时也是折腾了大半天才发现是这个问题。
看下label居中对齐的问题


    lv_obj_t *lbl_1 = lv_label_create(lv_scr_act());
    lv_obj_align(lbl_1,LV_ALIGN_TOP_LEFT,10,10);
    lv_label_set_text(lbl_1,"hello");

    lv_obj_t *lbl_2 = lv_label_create(lv_scr_act());
    lv_obj_align_to(lbl_2,lbl_1,LV_ALIGN_OUT_BOTTOM_MID,0,0);
    lv_label_set_text(lbl_2,"A");

在lbl2还未设置显示内容的时候，就进行了与lbl_1外部底部居中对齐。结果如下：
在这里插入图片描述

这个结果非常让人困惑，并没有进行居中对齐。

将对齐函数放到label函数显示内容之后。

    lv_obj_t *lbl_1 = lv_label_create(lv_scr_act());

    lv_label_set_text(lbl_1,"hello");
    lv_obj_align(lbl_1,LV_ALIGN_TOP_LEFT,10,10);

    lv_obj_t *lbl_2 = lv_label_create(lv_scr_act());

    lv_label_set_text(lbl_2,"A");
    lv_obj_align_to(lbl_2,lbl_1,LV_ALIGN_OUT_BOTTOM_MID,0,0);