差别

这里会显示出您选择的修订版和当前版本之间的差别。

--- icore4tlvgl_21 [2020/12/26 16:02]
zgf 创建
+++ icore4tlvgl_21 [2022/04/01 11:15] (当前版本)
sean
@@ 行 2: / 行 2: @@
 |技术支持电话|**0379-69926675-801**|||
 |技术支持邮件|Gingko@vip.163.com|||
-|技术论坛|http://www.eeschool.org|||
 ^  版本  ^  日期  ^  作者  ^  修改内容  ^
-|  V1.0  |  2020-12-14  |  yang  |  初次建立  |
+|  V1.0  |  2020-12-16  |  yang  |  初次建立  |
 ===== 实验二十一：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 |}}
-  * LV_LAYOUT_CENTER 在一列中将子对象中心对齐，并在它们之间保持 padding_inner 所设定的间距。
+  * **LV_LAYOUT_CENTER** 在一列中将子对象中心对齐，并在它们之间保持 padding_inner 所设定的间距。
 {{ :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 |}}
-  * LV_LAYOUT_COLUMN_MID 使子对象在中心列对齐，保持到顶部的距离为 padding_top ，子对象之间的距离为 padding_inner 。
+  * **LV_LAYOUT_COLUMN_MID** 使子对象在中心列对齐，保持到顶部的距离为 **padding_top** ，子对象之间的距离为** padding_inner** 。
 {{ :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>

用户工具

站点工具

差别

页面工具