Hi，大家好，欢迎来到STM32之littlevGL课堂，我们在上节课中学习了图表控件(lv_chart)，本节课带大家来学习一下容器控件，那么可能就会有小伙伴会问了，什么是容器控件呢？那么我们以本文举例的话就是这个容器控件会随着我们的文本内容的增减或者减少而不断变化大小，就像一直包裹着文本的一个容器，这样解释大家有没有理解一些呢？没理解没关系，我们先看图！ 一 有图有真相
是的，就像上面的图片一样，容器的大小是随着文本的内容多少来变化的，完全不需要我们每次都要重新设置容器窗口的大小，那么我们来看一下代码吧！ 二 代码分析 void cont_test(void)
{
lv_obj_t * cont1;
lv_obj_t * cont2;
lv_obj_t * cont3;
cont1 = lv_cont_create(lv_scr_act(), NULL);
lv_obj_set_auto_realign(cont1, true); /*Auto realign when the size changes*/
lv_obj_align_origo(cont1, NULL, LV_ALIGN_CENTER, 150, 0); /*This parametrs will be sued when realigned*/
lv_cont_set_fit(cont1, LV_FIT_TIGHT);
lv_cont_set_layout(cont1, LV_LAYOUT_COL_M);
lv_obj_t * label;
label = lv_label_create(cont1, NULL);
lv_label_set_text(label, "Short text");
cont2 = lv_cont_create(lv_scr_act(), NULL);
lv_obj_set_auto_realign(cont2, true); /*Auto realign when the size changes*/
lv_obj_align_origo(cont2, NULL, LV_ALIGN_CENTER, 0, 0); /*This parametrs will be sued when realigned*/
lv_cont_set_fit(cont2, LV_FIT_TIGHT);
lv_cont_set_layout(cont2, LV_LAYOUT_COL_M);
HAL_Delay(1000);
label = lv_label_create(cont2, NULL);
lv_label_set_text(label, "It is a long text");
cont3 = lv_cont_create(lv_scr_act(), NULL);
lv_obj_set_auto_realign(cont3, true); /*Auto realign when the size changes*/
lv_obj_align_origo(cont3, NULL, LV_ALIGN_CENTER, -200, 0); /*This parametrs will be sued when realigned*/
lv_cont_set_fit(cont3, LV_FIT_TIGHT);
lv_cont_set_layout(cont3, LV_LAYOUT_COL_M);
HAL_Delay(1000);
label = lv_label_create(cont3, NULL);
lv_label_set_text(label, "Here is an even longer text");
}
然后lv_obj_align_origo函数在你设置更改大小自动对齐后，这个是必须要有的，因为这个函数设置的是自动对齐方式，第二个参数就是当前容器要与之对齐的对象，填写NULL时是以我们的窗口为对象对齐的，然后LV_ALIGN_CENTER这个我们之前也讲过是内部居中对齐，然后后面两个参数是偏移坐标，这里是选择不偏移。 然后lv_cont_set_fit函数是设置我们的容器与容器内部的对象的围绕方式或者大小，其中第二个参数主要有下面几种： /**
* How to resize the container around the children.
*/
enum {
LV_FIT_NONE, /**< Do not change the size automatically*/
LV_FIT_TIGHT, /**< Shrink wrap around the children */
LV_FIT_FLOOD, /**< Align the size to the parent's edge*/
LV_FIT_FILL, /**< Align the size to the parent's edge first but if there is an object out of it
then get larger */
_LV_FIT_NUM
};
typedef uint8_t lv_fit_t;根据我实际测试，只有LV_FIT_TIGHT效果最好，其它效果大家可以自己测试一下，不过我感觉是都没效果。。。 lv_cont_set_layout这是设置我们的容器的布局方式，同样的参数也是一个枚举类型，主要有下面的几种选择： /** Container layout options*/
enum {
LV_LAYOUT_OFF = 0, /**< 无对齐 */
LV_LAYOUT_CENTER, /**< 居中对齐 */
LV_LAYOUT_COL_L, /**< 水平靠左*/
LV_LAYOUT_COL_M, /**< 水平居中*/
LV_LAYOUT_COL_R, /**< 水平靠右*/
LV_LAYOUT_ROW_T, /**< 垂直靠上*/
LV_LAYOUT_ROW_M, /**< 垂直居中*/
LV_LAYOUT_ROW_B, /**< 垂直靠下*/
LV_LAYOUT_PRETTY, /**< 行对齐*/
LV_LAYOUT_GRID, /**< 网格对齐*/
_LV_LAYOUT_NUM
};
typedef uint8_t lv_layout_t;OK，那么本节课先到这里，关于图表控件还有些不太常用的属性以及API，这里也就不再做介绍，不过相信随着你学习的深入，肯定自己也会摸索出很多方法的，那么我们下节课学习下拉列表控件，我们下节课再见！ |
