1.图层

LVGL具有图层概念,从顶层到底层依次是sys_layer层、top_layer层、act_scr层。
44.png
top_layer层及sys_layer层用来创建一些随处可见的内容。
top_layer层可以用来创建菜单栏,弹出窗口等…
鼠标光标可以放在所有层的上面以确保它始终可见,也就是放在sys_layer层。
一般都是在act_scr层创建各种控件(widgets),也就是objects对象。

2.objects

在LVGL中,用户界面的基本构建块是对象,也称为Widgets。例如Button、Label、Image、List、图表或文本区域。
创建objects对象并显示在act_scr层上:

  1. // 当前画面
  2. lv_obj_t* screen = lv_scr_act();

objects基本属性:

  • 位置：void lv_obj_set_pos(lv_obj_t * obj, lv_coord_t x, lv_coord_t y)
  • 尺寸：void lv_obj_set_size(lv_obj_t * obj, lv_coord_t w, lv_coord_t h)
  • align：void lv_obj_align(lv_obj_t * obj, lv_align_t align, lv_coord_t x_ofs, lv_coord_t y_ofs)
  • 样式：void lv_style_init(lv_style_t * style);

    2.1 位置

    objects设置位置的方法如下:
    1. void lv_obj_set_pos(lv_obj_t * obj, lv_coord_t x, lv_coord_t y)

    参数1:objects对象 参数2和参数3:坐标x和y

实现代码:

  1. void first_screen(){
  2.     //创建objects对象
  3.     lv_obj_t * obj = lv_obj_create(lv_scr_act());
  4.     //设置objects对象的位置
  5.     lv_obj_set_pos(obj,100,300);
  6. }

image.png

2.2 尺寸

objects设置尺寸的方法如下:

  1. void lv_obj_set_size(lv_obj_t * obj, lv_coord_t w, lv_coord_t h)

参数1:objects对象 参数2:宽度 参数3:高度

实现代码:

  1. void first_screen(){
  3.     lv_obj_t * obj = lv_obj_create(lv_scr_act());
  5.     lv_obj_set_pos(obj,100,100);
  7.     lv_obj_set_size(obj,300,500);
  8. }

2.3 aligin

lv_obj_align用来设置obj在父控件中的显示位置,定义如下:

  1. void lv_obj_align(lv_obj_t * obj, lv_align_t align, lv_coord_t x_ofs, lv_coord_t y_ofs)

参数1:objects对象 参数2:展示方式 参数3:在x方向的偏移 参数4:在y方向的偏移

实现代码:

  1. void first_screen(){
  2.     lv_obj_t * obj = lv_obj_create(lv_scr_act());
  3.     lv_obj_set_size(obj, 200, 200);
  4.     lv_obj_align(obj,LV_ALIGN_TOP_MID,0,0);
  5. }

image.png

常见的展示方式有: LV_ALIGN_DEFAULT = 0, LV_ALIGN_TOP_LEFT,
LV_ALIGN_TOP_MID,
LV_ALIGN_TOP_RIGHT, LV_ALIGN_BOTTOM_LEFT, LV_ALIGN_BOTTOM_MID, LV_ALIGN_BOTTOM_RIGHT, LV_ALIGN_LEFT_MID, LV_ALIGN_RIGHT_MID, LV_ALIGN_CENTER

image.png

2.4 样式

Styles用于设置对象的外观。样式是一个lv_style_t类型的变量,它可以保存边框宽度、文本颜色等属性。
创建样式变量:

  1. static lv_style_t style;

初始化样式方法:

  1. void lv_style_init(lv_style_t * style);

给objects添加style:

  1. void lv_obj_add_style(lv_obj_t * obj, lv_style_t * style, lv_style_selector_t selector)

参数1:objects对象 参数2:style样式 参数3:设置obj的状态或part,这里默认写0即可

经常设置的样式:

  1. //设置obj的宽度和高度
  2. void lv_style_set_width(lv_style_t * style, lv_coord_t value);
  3. void lv_style_set_height(lv_style_t * style, lv_coord_t value);
  4. //设置obj的x和y坐标
  5. void lv_style_set_x(lv_style_t * style, lv_coord_t value);
  6. void lv_style_set_y(lv_style_t * style, lv_coord_t value);
  7. //设置背景圆角半径
  8. void lv_style_set_radius(lv_style_t * style, lv_coord_t value);
  9. //上下左右的padding值
  10. void lv_style_set_pad_top(lv_style_t * style, lv_coord_t value);
  11. void lv_style_set_pad_bottom(lv_style_t * style, lv_coord_t value)
  12. void lv_style_set_pad_left(lv_style_t * style, lv_coord_t value);
  13. void lv_style_set_pad_right(lv_style_t * style, lv_coord_t value);
  14. // 设置背景颜色
  15. lv_style_set_bg_color(&style1,lv_palette_main(LV_PALETTE_PINK));

代码实现:

  1. void first_screen(){
  2.     //创建样式
  3.     static lv_style_t style;
  4.     //初始化
  5.     lv_style_init(&style);
  6.     //设置宽度和高度
  7.     lv_style_set_width(&style,100);
  8.     lv_style_set_height(&style,100);
  9.     //设置圆角半径
  10.     lv_style_set_radius(&style, 20);
  11.     //设置x坐标
  12.     lv_style_set_x(&style,100);
  13.     lv_style_set_y(&style,100);
  14.     //创建显示对象
  15.     lv_obj_t * obj = lv_obj_create(lv_scr_act());
  16.     //设置样式
  17.     lv_obj_add_style(obj, &style, 0);
  18. }

image.png