LVGL笔记10--lv_cont容器

LVGL笔记10–lv_cont容器

​简介：所谓的容器就是一个载体,用来装东西的,在 littleVGL 中,可以用来存放各种各样的子对象,当子对象的数量越来越多时,子对象们在父容器中的排列方式就显得尤为重要,因此lv_cont 容器就有一个专门的 Layout 布局属性来约束子对象们的摆放,layout 布局间隙是由样式来控制的,具体表现style.body.padding 样式属性上,lv_cont 容器除了 layout 这个重要特性外,还有一个 Auto fit 大小自动适应的特性.只要弄懂了 Layout 和 Auto fit 这俩个概念,lv_cont容器的使用就特别简单了,所以请务必搞懂,因为后面还有许多复杂一点的控件是由 lv_cont容器构成的.

---

主要数据类型

1. 布局数据类型

   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;
   

   • LV_LAYOUT_OFF：这个值是用来禁止布局功能的。当禁止后，对于子对象在容器中的摆放位置，子对象必须通过手动_lv_obj_set_pos(child,x,y);_这样的接口来设置其具体位置，如果没有禁止布局功能，就算子对象调用lv_obj_set_pos(child,x,y);函数也无效。

   • LV_LAYOUT_CENTER：把所有的子对象以从上到下的方式摆放在父容器的正中心，其中A,B,C子对象之间的垂直间距可以通过lv_cont_style.body.padding.inner样式值来修改。

   • LV_LAYOUT_COL_L：从父容器的左上角开始,把所有的子对象以从上到下的方式进行摆放,其中A,B,C子对象之间的垂直间距可以通过 lv_cont_style.body.padding.inner样式值来修改,与父容器左边的距离可以通过 lv_cont_style.body.padding.left 样式值来修改,与父容器上边的距离可以通过lv_cont_style.body.padding.top 样式值来修改

     • 

   • LV_LAYOUT_COL_M：从父容器的顶部中心点开始,把所有的子对象以从上到下的方式进行摆放,其中A,B,C 子对象之间的垂直间距可以通过 lv_cont_style.body.padding.inner样式值来修改,与父容器上边的距离可以通过 lv_cont_style.body.padding.top 样式值来修改。

     • 

   • LV_LAYOUT_COL_R：从父容器的右上角开始,把所有的子对象以从上到下的方式进行摆放,其中A,B,C 子对象之间的垂直间距可以通过 lv_cont_style.body.padding.inner样式值来修改,与父容器上边的距离可以通过 lv_cont_style.body.padding.top 样式值来修改。

     • 

   • LV_LAYOUT_ROW_T：从父容器的左上角开始,把所有的子对象以从左到右的方式进行摆放,其中A,B,C 子对象之间的水平间距可以通过 lv_cont_style.body.padding.inner样式值来修改,与父容器左边的距离可以通过 lv_cont_style.body.padding.left 样式值来修改,与父容器上边的距离可以通过 lv_cont_style.body.padding.top 样式值来修改

     • 

   • LV_LAYOUT_ROW_M：从父容器的左边中心点开始,把所有的子对象以从左到右的方式进行摆放,从父容器的左边中心点开始,把所有的子对象以从左到右的方式进行摆放。其中A,B,C 子对象之间的水平间距可以通过 lv_cont_style.body.padding.inner样式值来修改,与父容器左边的距离可以通过 lv_cont_style.body.padding.left 样式值来修改

     • 

   • LV_LAYOUT_ROW_B：从父容器的左下角开始,把所有的子对象以从左到右的方式进行摆放，其中A,B,C 子对象之间的水平间距可以通过 lv_cont_style.body.padding.inner样式值来修改,与父容器下边的距离可以通过 lv_cont_style.body.padding.bottom 样式值来修改。

     • 

   • LV_LAYOUT_PRETTY：从父容器的左上角开始,把所有的子对象以从左到右,从上到下的方式进行摆放,并且保证每一行都均匀分布,其中子对象之间的水平和垂直距离都是通过 lv_cont_style.body.padding.inner 样式值来修改的,另外通过 lv_cont_style.body.padding.left/top/right/bottom 等样式值来修改其与父容器相应边的距离

     • 

   • LV_LAYOUT_GRID：LV_LAYOUT_GRID 和 LV_LAYOUT_PRETTY 是很相似的,但是LV_LAYOUT_GRID 不

     要求在每一行均匀分布,而是按照 lv_cont_style.body.padding.inner 指定的间隙依次摆放

     • 

2. 大小自适应数据类型

   enum {
        LV_FIT_NONE, 
        LV_FIT_TIGHT, 
        LV_FIT_FLOOD, 
        LV_FIT_FILL, 
        _LV_FIT_NUM //这个值是无意义的,只是用来记录一下有多少种自适应方式
   };
   typedef uint8_t lv_fit_t;
   

   这个数据类型就是lv_cont容器的大小自适应特性，所谓的自适应就是指lv_cont容器的大小可以根据它的子对象或父对象的大小来调整。

   • LV_FIT_NONE：禁止 lv_cont 容器使用自适应功能,当禁止之后,那么 lv_cont 容器只能通过手动调用lv_obj_set_size 接口来设置容器的高和宽了,如果没有禁止的话,调用 lv_obj_set_size 接口是无效的

   • LV_FIT_TIGHT：包裹住所有的子对象,也就是说 lv_cont容器的大小是随着子对象们的总大小变化而变化的,子对象与父容器四边的距离可以通过 lv_cont_style.body.padding.left/top/right/bottom 样式值来相应的设置

   • LV_FIT_FLOOD：lv_cont容器平铺它父对象的整个空间,lv_cont容器与其父对象四边的距离可以通过其父对象样式中的 body.padding.left/top/right/bottom 值来相应的修改

   • LV_FIT_FILL：当 lv_cont 容器比其父对象小时,采用 LV_FIT_FLOOD 方式,当比其父对象大时,采用

     LV_FIT_TIGHT 方式

3. API接口函数

   1. 创建容器

      /*--------------------------------------------------------------------------------
      	par: 指向父对象
      	copy: 此参数可选,表示创建新对象时,把 copy 对象上的属性值复制过来
      	返回值: 返回新创建出来的容器对象,如果为 NULL 的话,说明堆空间不足了
      ---------------------------------------------------------------------------------*/
      lv_obj_t * lv_cont_create(lv_obj_t * par, const lv_obj_t * copy);
      

   2. 设置容器的布局方式

      /*-------------------------------------------------------------------------------
      	cont: 容器对象
      	layout: 布局方式,请详看 2.1.1 布局数据类型那一小章节
      -------------------------------------------------------------------------------*/
      void lv_cont_set_layout(lv_obj_t * cont, lv_layout_t layout);
      

   3. 设置容器4个方向的自适应方式

      /*-------------------------------------------------------------------------------
      	cont: 容器对象
          left: 左边的自适应方式,请详看 2.1.2 大小自适应数据类型那一小章节
          right: 右边的自适应方式
          top: 上边的自适应方式
          bottom: 下边的自适应方式
      -------------------------------------------------------------------------------*/
      void lv_cont_set_fit4(lv_obj_t * cont, lv_fit_t left, lv_fit_t right, lv_fit_t top, lv_fit_t bottom);
      
      

   4. 设置容器水平垂直向上的自适应方式

      /*-------------------------------------------------------------------------------
      	cont: 容器对象
      	hor: 水平方向上的自适应方式
      	ver: 垂直方向上的自适应方式
      -------------------------------------------------------------------------------*/
      static inline void lv_cont_set_fit2(lv_obj_t * cont, lv_fit_t hor, lv_fit_t ver);
      

   5. 设置容器的自适应方式

      /*-------------------------------------------------------------------------------
      	cont: 容器对象
      	fit: 四个方向上的共同自适应方式
      -------------------------------------------------------------------------------*/
      static inline void lv_cont_set_fit(lv_obj_t * cont, lv_fit_t fit);
      

   6. 设置容易的样式

      /*-------------------------------------------------------------------------------
      	cont: 容器对象
      	type: 设置容器上的哪部分样式,目前只有 LV_CONT_STYLE_MAIN 一个可选值
      	style: 样式
      -------------------------------------------------------------------------------*/
      static inline void lv_cont_set_style(lv_obj_t * cont, lv_cont_style_t type, const lv_style_t * style);