这里会显示出您选择的修订版和当前版本之间的差别。
后一修订版 | 前一修订版 上一修订版 两侧同时换到之后的修订记录 | ||
icore4tlvgl_21 [2020/12/26 16:02] zgf 创建 |
icore4tlvgl_21 [2020/12/26 16:12] zgf |
||
---|---|---|---|
行 4: | 行 4: | ||
|技术论坛|http://www.eeschool.org||| | |技术论坛|http://www.eeschool.org||| | ||
^ 版本 ^ 日期 ^ 作者 ^ 修改内容 ^ | ^ 版本 ^ 日期 ^ 作者 ^ 修改内容 ^ | ||
- | | V1.0 | 2020-12-14 | yang | 初次建立 | | + | | V1.0 | 2020-12-16 | yang | 初次建立 | |
===== 实验二十一:lv_cont容器 ===== | ===== 实验二十一:lv_cont容器 ===== | ||
- | |||
- | |||
- | {{ :icore4t:icore4t_rtt_lvgl_21_.png?direct |}} | ||
- | |||
- | <code c> | ||
- | |||
- | </code> | ||
- | |||
==== 一、容器 ==== | ==== 一、容器 ==== | ||
- | 容器本质上是具有布局和自动调整大小功能的基本对象。只有一种主要样式 LV_CONT_PART_MAIN ,可以使用所有典型的属性和填充来自动调整布局大小。 | + | 容器本质上是具有布局和自动调整大小功能的基本对象。只有一种主要样式** LV_CONT_PART_MAIN** ,可以使用所有典型的属性和填充来自动调整布局大小。 |
==== 二、布局 ==== | ==== 二、布局 ==== | ||
- | 用户可以使用 lv_cont_set_layout(cont, LV_LAYOUT_... ) 在容器上应用布局来自动对其子对象进行排序,布局间距来自style.body.padding. ... 属性。可能的布局选项: | + | 用户可以使用 **lv_cont_set_layout(cont, LV_LAYOUT_... )** 在容器上应用布局来自动对其子对象进行排序,布局间距来自**style.body.padding...** 属性。可能的布局选项: |
- | * LV_LAYOUT_OFF 不要对齐子对象。 | + | * **LV_LAYOUT_OFF** 不要对齐子对象。 |
- | * | + | |
{{ :icore4t:icore4t_rtt_lvgl_21_1.png?direct |}} | {{ :icore4t:icore4t_rtt_lvgl_21_1.png?direct |}} | ||
- | * LV_LAYOUT_CENTER 在一列中将子对象中心对齐,并在它们之间保持 padding_inner 所设定的间距。 | + | * **LV_LAYOUT_CENTER** 在一列中将子对象中心对齐,并在它们之间保持 padding_inner 所设定的间距。 |
{{ :icore4t:icore4t_rtt_lvgl_21_2.png?direct |}} | {{ :icore4t:icore4t_rtt_lvgl_21_2.png?direct |}} | ||
- | * LV_LAYOUT_COLUMN_LEFT 在左对齐的列中对齐子对象,保持子对象到左边的距离为 padding_left ,到顶部的距离为 padding_top ,子对象之间的距离为 padding_inner 。 | + | * **LV_LAYOUT_COLUMN_LEFT** 在左对齐的列中对齐子对象,保持子对象到左边的距离为 **padding_left** ,到顶部的距离为 **padding_top** ,子对象之间的距离为 **padding_inner** 。 |
{{ :icore4t:icore4t_rtt_lvgl_21_3.png?direct |}} | {{ :icore4t:icore4t_rtt_lvgl_21_3.png?direct |}} | ||
- | * LV_LAYOUT_COLUMN_MID 使子对象在中心列对齐,保持到顶部的距离为 padding_top ,子对象之间的距离为 padding_inner 。 | + | * **LV_LAYOUT_COLUMN_MID** 使子对象在中心列对齐,保持到顶部的距离为 **padding_top** ,子对象之间的距离为** padding_inner** 。 |
{{ :icore4t:icore4t_rtt_lvgl_21_4.png?direct |}} | {{ :icore4t:icore4t_rtt_lvgl_21_4.png?direct |}} | ||
- | * LV_LAYOUT_COLUMN_RIGHT 在右对齐的列中对齐子对象,保持子对象到右边的距离为 padding_right ,到顶部的距离为 padding_top ,子对象之间的距离为 padding_inner 。 | + | * **LV_LAYOUT_COLUMN_RIGHT** 在右对齐的列中对齐子对象,保持子对象到右边的距离为 **padding_right** ,到顶部的距离为 **padding_top** ,子对象之间的距离为 **padding_inner** 。 |
- | {{ :icore4t:icore4t_rtt_lvgl_21_.png?direct |}} | + | {{ :icore4t:icore4t_rtt_lvgl_21_5.png?direct |}} |
- | * LV_LAYOUT_ROW_TOP 子对象排为一行在容器顶部对齐,保持子对象到左边的距离为 padding_left ,到顶部的距离为 padding_top ,子对象之间的距离为 padding_inner 。 | + | |
- | * LV_LAYOUT_ROW_MID 子对象排为一行在容器中间对齐,保持子对象到左边的距离为 padding_left ,子对象之间的距离为 padding_inner 。 | + | * **LV_LAYOUT_ROW_TOP** 子对象排为一行在容器顶部对齐,保持子对象到左边的距离为 **padding_left** ,到顶部的距离为 **padding_top** ,子对象之间的距离为 **padding_inner** 。 |
- | * LV_LAYOUT_ROW_BOTTOM 子对象排为一行在容器底部对齐,保持子对象到左边的距离为 padding_left ,到底部的距离为 padding_bottom ,子对象之间的距离为 padding_inner 。 | + | {{ :icore4t:icore4t_rtt_lvgl_21_6.png?direct |}} |
- | * LV_LAYOUT_PRETTY_TOP 在这个模式下,容器的宽度取决于最宽的子对象,在确保间距 padding_inner 和两侧距离padding_left/right 的前提下将其余的子对象尽可能多的排列在一行,一行中的空间平均分配给该行子对象。如果子对象的高度不同,则对齐他们的上边缘。 | + | * **LV_LAYOUT_ROW_MID** 子对象排为一行在容器中间对齐,保持子对象到左边的距离为 **padding_left** ,子对象之间的距离为 **padding_inner** 。 |
- | * LV_LAYOUT_PRETTY_MID 同理,将其余的子对象尽可能多的排列在一行,如果子对象的高度不同,则使他们水平居中对齐。 | + | {{ :icore4t:icore4t_rtt_lvgl_21_7.png?direct |}} |
- | * LV_LAYOUT_PRETTY_BOTTOM 同理,将其余的子对象尽可能多的排列在一行。但是如果子对象的高度不同,则对齐他们的底线。 | + | * **LV_LAYOUT_ROW_BOTTOM** 子对象排为一行在容器底部对齐,保持子对象到左边的距离为 **padding_left** ,到底部的距离为** padding_bottom** ,子对象之间的距离为 **padding_inner** 。 |
- | * LV_LAYOUT_GRID 类似于 LV_LAYOUT_PRETTY 但不能平均划分水平空间,只是保持到两边的距离 padding_left/right 和它们的间距 padding_inner 。 | + | {{ :icore4t:icore4t_rtt_lvgl_21_8.png?direct |}} |
+ | |||
+ | * **LV_LAYOUT_PRETTY_TOP** 在这个模式下,容器的宽度取决于最宽的子对象,在确保间距 **padding_inner** 和两侧距离 **padding_left/right** 的前提下将其余的子对象尽可能多的排列在一行,一行中的空间平均分配给该行子对象。如果子对象的高度不同,则对齐他们的上边缘。 | ||
+ | |||
+ | {{ :icore4t:icore4t_rtt_lvgl_21_9.png?direct |}} | ||
+ | |||
+ | * **LV_LAYOUT_PRETTY_MID** 同理,将其余的子对象尽可能多的排列在一行,如果子对象的高度不同,则使他们水平居中对齐。 | ||
+ | |||
+ | {{ :icore4t:icore4t_rtt_lvgl_21_10.png?direct |}} | ||
+ | |||
+ | *** LV_LAYOUT_PRETTY_BOTTOM** 同理,将其余的子对象尽可能多的排列在一行。但是如果子对象的高度不同,则对齐他们的底线。 | ||
+ | |||
+ | {{ :icore4t:icore4t_rtt_lvgl_21_11.png?direct |}} | ||
+ | |||
+ | * **LV_LAYOUT_GRID** 类似于 **LV_LAYOUT_PRETTY** 但不能平均划分水平空间,只是保持到两边的距离 **padding_left/right** 和它们的间距 **padding_inner** 。 | ||
+ | |||
+ | {{ :icore4t:icore4t_rtt_lvgl_21_12.png?direct |}} | ||
==== 三、尺寸自适应 ==== | ==== 三、尺寸自适应 ==== | ||
容器具有自动适应功能,可以根据其子对象和父对象自动更改容器的大小。存在以下选项: | 容器具有自动适应功能,可以根据其子对象和父对象自动更改容器的大小。存在以下选项: | ||
- | * LV_FIT_NONE 不自动更改大小。 | + | * **LV_FIT_NONE** 不自动更改大小。 |
- | * LV_FIT_TIGHT 将容器收缩包裹在其所有子对象周围,同时确保容器与子对象的间距 padding_top/bottom/left/right 。 | + | * **LV_FIT_TIGHT** 将容器收缩包裹在其所有子对象周围,同时确保容器与子对象的间距 padding_top/bottom/left/right 。 |
- | * LV_FIT_PARENT 将容器大小设置为父对象的大小并减去父对象的样式属性 padding_top/bottom/left/right 的距离。 | + | * **LV_FIT_PARENT** 将容器大小设置为父对象的大小并减去父对象的样式属性 **padding_top/bottom/left/right** 的距离。 |
- | * LV_FIT_MAX 当尺寸小于父对象时,使用 LV_FIT_PARENT ,当比父对象大时使用 LV_FIT_TIGHT ,它将确保该容器至少是其父容器的大小。 | + | * **LV_FIT_MAX** 当尺寸小于父对象时,使用** LV_FIT_PARENT** ,当比父对象大时使用 **LV_FIT_TIGHT** ,它将确保该容器至少是其父容器的大小。 |
- | 要为各个方向设置自动适应模式,请使用 lv_cont_set_fit(cont, LV_FIT_...) 。要在水平和垂直方向上使用不同的自动适应,请使用 lv_cont_set_fit2(cont, hor_fit_type, ver_fit_type) 。要在所有四个方向上使用不同的自动拟合,请使用 lv_cont_set_fit4(cont, left_fit_type, right_fit_type, top_fit_type, bottom_fit_type)。 | + | 要为各个方向设置自动适应模式,请使用 **lv_cont_set_fit(cont, LV_FIT_...)** 。要在水平和垂直方向上使用不同的自动适应,请使用 **lv_cont_set_fit2(cont, hor_fit_type, ver_fit_type)** 。要在所有四个方向上使用不同的自动拟合,请使用 **lv_cont_set_fit4(cont, left_fit_type, right_fit_type, top_fit_type, bottom_fit_type)**。 |
+ | {{ :icore4t:icore4t_rtt_lvgl_21_13.gif?direct |}} | ||
+ | |||
+ | <code c> | ||
+ | void lv_gui_run(void){ | ||
+ | lvgl2rtt_init("lcd"); /* 初始化lvgl2rtt */ | ||
+ | |||
+ | lv_obj_t * cont = lv_cont_create(lv_scr_act(), NULL);/* 创建容器 */ | ||
+ | lv_obj_set_auto_realign(cont, true); /* 尺寸改变时,自动调整大小 */ | ||
+ | lv_obj_align_origo(cont, NULL, LV_ALIGN_CENTER, 0, 0);/* 设置对齐方式*/ | ||
+ | lv_cont_set_fit(cont, LV_FIT_TIGHT); /* 设置填充 */ | ||
+ | lv_cont_set_layout(cont, LV_LAYOUT_COLUMN_MID); /* 设置布局,对其在中间列 */ | ||
+ | |||
+ | lv_obj_t * label = lv_label_create(cont, NULL); /* 创建子标签 */ | ||
+ | lv_label_set_text(label, "Short text"); /* 设置内容 */ | ||
+ | |||
+ | uint32_t t; | ||
+ | lv_refr_now(NULL); | ||
+ | t = lv_tick_get(); /* 获取LVGL心跳,1ms增1 */ | ||
+ | while(lv_tick_elaps(t) < 500); /* 延时500ms */ | ||
+ | label = lv_label_create(cont, NULL); /* 创建新的子标签 */ | ||
+ | lv_label_set_text(label, "It is a long text"); | ||
+ | |||
+ | lv_refr_now(NULL); | ||
+ | t = lv_tick_get(); | ||
+ | while(lv_tick_elaps(t) < 500); /* 延时500ms */ | ||
+ | label = lv_label_create(cont, NULL); /* 创建新的子标签 */ | ||
+ | lv_label_set_text(label, "Here is an even longer text"); | ||
+ | } | ||
+ | |||
+ | </code> | ||