立即注册 找回密码

微雪课堂

搜索
微雪课堂 图形用户界面(GUI) 查看内容

STM32之littlevGL系列教程:容器控件(lv_cont)

2020-3-29 11:00| 发布者: imliubo| 查看: 3581| 评论: 0|原作者: IAMLIUBO

摘要: Hi,大家好,欢迎来到STM32之littlevGL课堂,我们在上节课中学习了图表控件(lv_chart),本节课带大家来学习一下容器控件,那么可能就会有小伙伴会问了,什么是容器控件呢?那么我们以本文举例的话就是这个容器控件会 ...
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_set_auto_realign函数,这个函数的主要作用是当对象大小更改后启用自动对齐,不过这个函数实际上是属于基本的对象的基本属性,因为这个函数是以lv_obj开头的,所以不属于容器控件的特殊函数。
然后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;
几种对齐方式有没有很熟悉呢?是的,就跟我们的Word或者Excel的表格中的文本对齐差不多,然后我们就往容器中添加文本了,大家可以先注释掉后两次的文本添加看一下大小,然后取消注释后再看一下容器的大小,事实正面容器的大小是在变化的,而我们没有进行任何的容器大小操作,所以容器就可以理解为装着某些对象的器件,但是这个器件会随着内部的对象的大小或者内容而改变大小。

OK,那么本节课先到这里,关于图表控件还有些不太常用的属性以及API,这里也就不再做介绍,不过相信随着你学习的深入,肯定自己也会摸索出很多方法的,那么我们下节课学习下拉列表控件,我们下节课再见!



81

顶一下

刚表态过的朋友 (81 人)

相关阅读

最新评论

微雪官网|产品资料|手机版|小黑屋|微雪课堂. ( 粤ICP备05067009号 )

GMT+8, 2024-3-29 18:15 , Processed in 0.029216 second(s), 17 queries .

返回顶部