【LVGL】【阶段总结1】

基础对象(lv_obj)

其中,所有的对象都使用 lv_obj_t 类型的指针定义

对象所拥有的基本属性

  • 位置(Position)
  • 大小(Size)
  • 父类(Parent)
  • 风格(Styles)
  • 时间处理程序(Event handlers)
  • Etc

设置属性,获取属性 lv_obj_set_...lv_obj_get_...

lv_obj_set_size(btn1, 100, 50);	  /*Set a button's size*/
lv_obj_set_pos(btn1, 20,30);      /*Set a button's position*/

设置位置(Position)

默认情况下,x 和 y 坐标是从父级内容区域的左上角开始测量的。

lv_obj_set_pos(obj,100, 100);    //X、Y

lv_obj_set_x(obj, 200);
lv_obj_set_y(obj, 50);

百分比值是根据父级的内容区域大小计算的。

lv_obj_set_x(btn, lv_pct(10)); //x = 10 % of parent content area width

设置大小(Size)

lv_obj_set_size(obj, 100, 100);    //宽、高

lv_obj_set_width(obj, 300);  
lv_obj_set_height(obj, 500); 

百分比值是根据父级的内容区域大小计算的。

lv_obj_set_height(obj, lv_pct(100));

设置内容区域的大小

lv_obj_set_content_width(obj, 50); //The actual width: padding left + 50 + padding right
lv_obj_set_content_height(obj, 30); //The actual width: padding top + 30 + padding bottom

检索边界框和内容区域的大小

lv_coord_t w = lv_obj_get_width(obj);
lv_coord_t h = lv_obj_get_height(obj);
lv_coord_t content_w = lv_obj_get_content_width(obj);
lv_coord_t content_h = lv_obj_get_content_height(obj);

对齐方式(Alignment)

两种对齐方式,第一种是参照父类

lv_obj_align(obj, base, LV_ALIGN_CENTER, 10, 10);
//函数原型
void lv_obj_align(lv_obj_t * obj, lv_align_t align, lv_coord_t x_ofs, lv_coord_t y_ofs)
//另一函数
void lv_obj_align_to(lv_obj_t * obj, const lv_obj_t * base, lv_align_t align, lv_coord_t x_ofs, lv_coord_t y_ofs)
//不需要偏移
lv_obj_set_align(obj, align);
  • obj:要设置的对象
  • base:参照对象
  • align:对齐方式
  • x_ofs:X偏移量
  • y_ofs:Y偏移量

将对象与父级中心对齐很常见,创立了专门函数

lv_obj_center(obj);

样式(Using styles)

位置、大小、对齐属性都是样式属性!!!

属性示例:

static lv_style_t style;
lv_style_init(&style);
lv_style_set_width(&style, 100);

lv_obj_t * btn = lv_btn_create(lv_scr_act());
lv_obj_add_style(btn, &style, LV_PART_MAIN);

LVGL控件

LVGL是以对象为概念的。基础的对象为 lv_obj 控件。其他空间都是 lv_obj 控件的衍生。

核心控件

名称 中文名 表示 简介
Arc lv_arc
Bar 进度条 lv_bar
Button 按键 lv_btn
Button matrix 按键矩阵 lv_btnmatrix
Canvas 画布 lv_canvas
Checkbox 复选框 lv_checkbox
Drop-down list 下拉列表 lv_dropdown
Image 图片 lv_img
Label 标签 lv_label
Line 线 lv_line
Roller 滚动条 lv_roller
Slider 滑块 lv_slider
Switch 开关 lv_switch
Table 表格 lv_table
Test area 文本区域 lv_textarea

额外控件

名称 中文名 表示 简介
Animation Image 动画图像 lv_animimg
Calendar 日历 lv_calendar
Chart 图表 lv_chart
Color wheel 颜色选择器 lv_colorwheel
Image button 图片按键 lv_imgbtn
Keyboard 键盘 lv_keyboard
LED LED lv_led
List 列表 lv_list
Menu 菜单 lv_menu
Meter 仪表 lv_meter
Message box 消息框 lv_msgbox
Span 跨度 lv_span
Spinbox 微调 lv_spinbox
Spinner 环形加载 lv_spinner
Tabview 标签视图 lv_tabview
Tile view 网格切换 lv_tileview
Window 窗口 lv_win

猜你喜欢

转载自blog.csdn.net/qq_41650023/article/details/125279628