使用ZYNQ芯片和LVGL框架实现用户高刷新UI设计系列教程(第九讲)

最新推荐文章于 2025-04-25 18:29:26 发布

尤老师FPGA

最新推荐文章于 2025-04-25 18:29:26 发布

阅读量668

点赞数 8

分类专栏： Lvgl 文章标签： ui

本文链接：https://blog.csdn.net/weixin_38828382/article/details/147415951

版权

Lvgl 专栏收录该内容

9 篇文章

订阅专栏

这一期讲解GUI_guider中的容器控件的使用以及相关函数，容器本质上是具有布局和自动调整大小功能的基本对象，通常用来装载其他子控件。
打开上一期的项目，在工具栏中选中容器控件拖拽到界面中，具体如图所示：
在这里插入图片描述
容器默认是浮于其他控件上，我们右键容器控件选择“置底”，然后改变容器位置为（75，56），大小为（329，400），圆角半径为30，具体如图所示：

以下是界面的相关代码：
//Write codes screen_2_cont_1
//创建容器控件
ui->screen_2_cont_1 = lv_obj_create(ui->screen_2);
//设置位置以及大小
lv_obj_set_pos(ui->screen_2_cont_1, 75, 56);
lv_obj_set_size(ui->screen_2_cont_1, 329, 400);
//禁用容器滚动条
lv_obj_set_scrollbar_mode(ui->screen_2_cont_1, LV_SCROLLBAR_MODE_OFF);

//Write style for screen_2_cont_1, Part: LV_PART_MAIN, State: LV_STATE_DEFAULT.
//设置边框宽度
lv_obj_set_style_border_width(ui->screen_2_cont_1, 2, LV_PART_MAIN|LV_STATE_DEFAULT);

//设置边框透明度
lv_obj_set_style_border_opa(ui->screen_2_cont_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置边框颜色
lv_obj_set_style_border_color(ui->screen_2_cont_1, lv_color_hex(0x2195f6), LV_PART_MAIN|LV_STATE_DEFAULT);
//设置边框显示方式
lv_obj_set_style_border_side(ui->screen_2_cont_1, LV_BORDER_SIDE_FULL, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置圆角半径
lv_obj_set_style_radius(ui->screen_2_cont_1, 30, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置背景透明度
lv_obj_set_style_bg_opa(ui->screen_2_cont_1, 255, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置背景颜色
lv_obj_set_style_bg_color(ui->screen_2_cont_1, lv_color_hex(0xffffff), LV_PART_MAIN|LV_STATE_DEFAULT);
//设置背景渐变方向
lv_obj_set_style_bg_grad_dir(ui->screen_2_cont_1, LV_GRAD_DIR_NONE, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置内边距（顶部、底部、左侧、右侧）
lv_obj_set_style_pad_top(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_bottom(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_left(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
lv_obj_set_style_pad_right(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);
//设置阴影宽度
lv_obj_set_style_shadow_width(ui->screen_2_cont_1, 0, LV_PART_MAIN|LV_STATE_DEFAULT);

容器控件布局方式的API
lv_cont_set_layout(lv_obj_t * cont, lv_layout_t layout)；其中第二个参数指的是容器的布局方式。

LV_LAYOUT_OFF = 0
无布局：没有指定布局，意味着对象的位置和大小由开发者手动设置，LVGL 不会自动调整。
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
布局类型的数量：表示布局类型的总数（这个常量通常用于表示布局枚举的数量）。

容器自适应的API
函数有三个分别为：（1）lv_cont_set_fit4(lv_obj_t * cont, lv_fit_t left, lv_fit_t right, lv_fit_t top, lv_fit_t bottom)
（2）static inline void lv_cont_set_fit2(lv_obj_t * cont, lv_fit_t hor, lv_fit_t ver)
（3）static inline void lv_cont_set_fit(lv_obj_t * cont, lv_fit_t fit)
以上函数的作用都是设定容器的自适应方式，第一个设定四个方向的自适应方式，第二个是设定水平和垂直方向上的自适应方式，第三个是将四个方向的自适应方式统一设定。
以下是lv_fit_t的定义：

LV_FIT_NONE
不自动调整大小：此选项表示对象的大小不会自动调整，而是保持开发者手动设置的大小，不受父容器或子对象的影响。
LV_FIT_TIGHT
紧缩包裹子对象：对象的大小会自动调整为刚好包裹其所有子对象的大小，即对象的尺寸会紧密贴合子对象，避免任何空隙。
LV_FIT_FLOOD
填充到父容器的边缘：对象的大小会自动调整，使其填满父容器的空间。这意味着对象的大小会与父容器的尺寸一致。
LV_FIT_FILL
填充父容器的边缘，但如果有子对象超出父容器范围，则会增大对象大小：这个选项首先会让对象填满父容器的边缘。如果对象内有子对象超出父容器的边界，容器会自动增大，直到所有子对象都能完全显示为止。
_LV_FIT_NUM
适配类型数量：表示适配类型的总数，通常用于定义适配类型的枚举数量。
注：具体请参照对应版本的官方手册。

这些适配类型控制了对象如何根据其父容器和子对象的情况调整大小。不同的适配类型可以满足不同布局和排版需求，让开发者更灵活地管理对象的尺寸和显示效果，下一期将讲解登录按键以及ok的回调逻辑。

本文章由威三学社出品
对课程感兴趣可以私信联系