2-6-1_基础对象的盒子模型(Boxing model)

2-6-1_基础对象的盒子模型(Boxing model)

理论

https://lvgl.100ask.net/9.2/overview/coord.html

Boxing model ( 盒子模型)

▶显示原文

LVGL遵循CSS的 border-box模型。一个对象的“盒子”由以下部分构成：

·边界框：元素的宽度/高度。

·边框宽度：边框的宽度。

·填充：对象与其子元素之间的间距。

·外边距：对象外部的间距(仅由某些布局考虑)

· 内容：内容区域，即边界框减去边框宽度和内边距的大小。

边界绘制在边界框内。在边界内部，LVGL在放置对象的子对象时保持“填充边距”。

轮廓绘制在边界框之外。

LVGL遵循CSS的border-box 模型。对象的“盒子”由以下部分构成：

. 边 界(bounding): 元素的宽度/高度围起来的区域(整个盒子)。

. 轮 廓(outline): 盒子之间的距离，确认代之的是轮廓(outline) 。 它是绘制于元素(盒子)周围的一条线，它不 占据空间，位于边框边缘的外围，可起到突出元素(盒子)的作用。在浏览器里，当鼠标点击或使用Tab键让一 个选项或者一个图片获得焦点的时候，这个元素就会多了一个轮廓框围绕。轮廓(outline)。

· 边 框( border): 边框有大小和颜色等属性(相当于盒子的厚度和它的颜色)。

. 填 充(padding): 对象两侧与其子对象之间的空间(盒子的填充物)。

· 内 容(conten t): 如果边界框按边框宽度和填充的大小缩小，则显示其大小的内容区域(盒子实际装东西的区 域)。

· LVGL的盒子模型是我们理解对象(部件)的组成，修改对象的样式，实现对对象的布局、处理对象排列等等的 关键。

盒子模型通俗理解：

· 这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解，日常生活中所见的盒子也就是能装 东西的一种箱子，也具有这些属性，所以叫它盒子模型。

. content 就是盒子里装的东西，它有高度 (height) 和宽度 ( width), 可以是图片，可以是文字或者小盒子嵌 套，在现实中，内容不能大于盒子，内容大于盒子就会撑破盒子，在LVGL中盒子不会变化，会产生滚动条， 我们可以滚动查看超出盒子的内容，盒子也可以是有弹性的，内容太大就会撑大盒子(自动调整大小),但 是不会损害盒子。

· padding即是填充，就好像我们为了保证盒子里的东西不损坏，填充了一些东西，比如泡沫或者塑料薄膜， 填充物有大有小，有软有硬。

· border 就是再外一层的边框，因为边框有大小和颜色的属性，相当于盒子的厚度和它的颜色或者材料。

实践部分

void lesson_2_6_1 (void)

lv_obj_ t* obj1= 1v_obj _create(1v_screen_active());

1v_obj_align (obj1, LV_ALIGN_CENTER,0, θ);

//Lv_obj_ set_style_border_width(obj1,10,θ);

//Lv_obj_ set_style_outline_width(ob j1,10,0);

//Lv_obj _set_styLe_ pad_aLL(obj1,0,θ);

#if 1

lv_obj_ t* obj2 =1v_obj_create(1v_screen_active());

lv_obj_t *obj_out_top =lv_obj_ create(lv_screen_active());

lv_ obj_t *obj_out_bottom = 1v_ob j_create(1v_screen_active());

lv_obj_t *obj_out_left =lv_obj _create(1v_screen_active());

lv_obj_t* obj_out_right =1v_obj_create(1v_screen_active());

//L v_obj_set_style_ outline_width(obj_ out_Left,10,θ);

lv_obj_align (obj1, LV_ALIGN_CENTER,θ, θ);

lv_obj_align_to (obj_out_top ,obj1 ,LV_A LIGN_OUT_TOP_MID,0,θ);

lv_obj_align_to (obj_out_bottom,obj1,LV_ALIGN_OUT_BOTTOM_MID,0,0);

lv_obj_align_to (obj_out_left ,obj1,LV_ALIGN_OUT_LEFT_MID,0,0);

lv_obj_align_to (obj_out_right, obj1 ,LV_ALIGN_OUT_RIGHT_MID,θ,0);

lv_obj_align_to (obj2, obj_out_right, LV_ALIGN_OUT_TOP_MID,0,0);

#endif