目录
一、前言
我是 Hello_Embed
在掌握 LVGL 的属性机制后，本次我们学习界面开发的核心基础：对象大小、坐标设置 以及盒子模型。这些知识点决定了控件在屏幕上的显示尺寸、位置和布局规则，是编写规范 LVGL 界面的必备知识。
二、基础对象的大小
基础对象创建后为矩形，结构简单、代表性强，我们以它为例讲解大小的设置与获取。
设置大小
- 设置宽度：
lv_obj_set_width(obj, new_width); - 设置高度：
lv_obj_set_height(obj, new_height); - 同时设置宽高：
lv_obj_set_size(obj, new_width, new_height);
获取大小
- 获取实际宽度：
lv_obj_get_width(obj); - 获取实际高度：
lv_obj_get_height(obj); - 获取实际可用宽度：
lv_obj_get_content_width(obj); - 获取实际可用高度：
lv_obj_get_content_height(obj); - 获取实际可用宽高区域：
lv_obj_get_content_coords(obj);
演示代码
c
void lesson_2_4_1(void)
{
// 创建基础对象
lv_obj_t * obj = lv_obj_create(lv_screen_active());
//lv_obj_set_width(obj, 300);
//lv_obj_set_height(obj, 500);
//lv_obj_set_size(obj,300, 300);
//lv_obj_update_layout(obj);
//lv_obj_update_layout(obj);
//LV_LOG_USER("w:%d\n", lv_obj_get_width(obj));
//LV_LOG_USER("h:%d\n", lv_obj_get_height(obj));
//LV_LOG_USER("content_w:%d", lv_obj_get_content_width(obj));
//LV_LOG_USER("content_h:%d", lv_obj_get_content_height(obj));
}代码默认执行会创建一个标准矩形。
解除宽高设置的注释后，矩形尺寸会改变，超出窗口的部分需要拖动显示。
宽高重复设置时，以最后一条指令为准。
补充：代码中实际宽高为 300，可用宽高为 270，差值为对象的内边距；在对象内创建子对象时，会自动保留该间距。
若在代码末尾创建嵌套对象：
c
obj = lv_obj_create(obj);运行效果如下：
三、基础对象的坐标
LVGL 使用LCD 坐标系 ，原点在屏幕左上角，水平向右为 X 轴正方向，竖直向下为 Y 轴正方向，与平面直角坐标系不同。
示例中默认屏幕分辨率：800x480。
坐标设置 API
- 设置 X 坐标：
lv_obj_set_x(obj, 200); - 设置 Y 坐标：
lv_obj_set_y(obj, -50); - 同时设置 XY 坐标：
lv_obj_set_pos(obj, 1300, 600); - 设置对齐方式：
lv_obj_set_align(obj, LV_ALIGN_CENTER); - 带偏移量居中：
lv_obj_align(obj, LV_ALIGN_CENTER, 100, 100);
演示代码
c
void lesson_2_5_1(void)
{
lv_obj_t * obj = lv_obj_create(lv_screen_active());
//lv_obj_set_x(obj, 200);
//lv_obj_set_y(obj, -50);
lv_obj_set_pos(obj, 1300, 600);
//lv_obj_set_size(obj, 300, 300);
//lv_obj_set_align(obj, LV_ALIGN_CENTER);
//lv_obj_align(obj, LV_ALIGN_CENTER, 100, 100);
//lv_obj_update_layout(obj);
//lv_obj_t * label = lv_label_create(lv_screen_active());
//lv_label_set_text(label, "Hello, LVGL!");
//lv_obj_align_to(label, obj, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
//LV_LOG_USER("x:%d\n", lv_obj_get_x(obj));
//LV_LOG_USER("y:%d\n", lv_obj_get_y(obj));
//LV_LOG_USER("x2:%d\n", lv_obj_get_x2(obj));
//LV_LOG_USER("y2:%d\n", lv_obj_get_y2(obj));
//LV_LOG_USER("x_aligne:%d\n", lv_obj_get_x_aligned(obj));
//LV_LOG_USER("y_aligne:%d\n", lv_obj_get_y_aligned(obj));
}核心规则
- 坐标为负数时，对象会超出屏幕边界；
- 常用对齐方式：
LV_ALIGN_CENTER（居中）、LV_ALIGN_TOP_MID（顶部居中）等； - 获取坐标前，调用
lv_obj_update_layout(obj)刷新布局，可保证获取值准确； - 确定矩形对角点坐标，即可唯一确定对象位置。
四、基础对象的盒子模型
LVGL 的盒子模型定义了对象的组成结构，是布局、样式修改的核心依据。
盒子组成部分
- 边界 (bounding)：对象宽高包裹的整个区域；
- 轮廓 (outline)：边框外围的线条，不占用空间，用于突出显示；
- 边框 (border)：对象的边框，可设置宽度、颜色；
- 填充 (padding)：对象与子对象之间的内边距；
- 内容 (content)：对象内部可显示子控件的区域。
演示代码
c
void lesson_2_6_1(void)
{
lv_obj_t * obj1 = lv_obj_create(lv_screen_active());
lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);
//lv_obj_set_style_border_width(obj1, 10, 0);
//lv_obj_set_style_outline_width(obj1, 10, 0);
//lv_obj_set_style_pad_all(obj1, 0, 0);
#if 0
lv_obj_t * obj2 = lv_obj_create(lv_screen_active());
lv_obj_t * obj_out_top = lv_obj_create(lv_screen_active());
lv_obj_t * obj_out_bottom = lv_obj_create(lv_screen_active());
lv_obj_t * obj_out_left = lv_obj_create(lv_screen_active());
lv_obj_t * obj_out_right = lv_obj_create(lv_screen_active());
//lv_obj_set_style_outline_width(obj_out_left, 10, 0);
lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);
lv_obj_align_to(obj_out_top, obj1, LV_ALIGN_OUT_TOP_MID, 0, 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, 0);
lv_obj_align_to(obj2, obj_out_right, LV_ALIGN_OUT_TOP_MID, 0, 0);
#endif
}五、总结
- LVGL 通过专用 API 设置 / 获取对象大小，实际尺寸与可用尺寸的差值为内边距；
- LCD 坐标系原点在左上角，支持坐标、对齐两种定位方式；
- 盒子模型由边界、轮廓、边框、填充、内容组成，是 LVGL 布局与样式的核心。
六、结尾
大小、坐标和盒子模型是 LVGL 界面开发的基石，熟练掌握这些知识，才能精准控制控件的显示效果。我是 Hello_Embed，期待你的关注！