一、对象的创建和基础设置

1.1 代码

1
2
3
obj = lv_obj_create(lv_screen_active());	 //在当前活动的屏幕上创建一个对象
lv_obj_set_size(obj, LV_PCT(40), LV_PCT(30));//设置 obj 对象的尺寸
lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);    //将 obj 对象对齐

1.2 说明

  • lv_screen_active()获取当前活动屏幕
  • LV_PCT(40)宽度占屏幕宽度的 40%。
  • LV_ALIGN_CENTER将对象对齐到屏幕的中心位置
  • 0，0相对位置偏移量，意味着对象的中心点与屏幕的中心对齐，没有偏移
1
2
3
4
5
6
7
8
9
lv_obj_t * obj = lv_obj_create(lv_screen_active());//窗机爱你对象
lv_obj_set_size(obj,300, 300);					   //设置对象宽高

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));//获取对象实际可用的高度
  • LV_LOG_USER()控制台输出数据

二、位置

2.1 LCD坐标系

WebGL屏幕坐标系、canvas坐标系和WebGL坐标系转换——学习笔记_canvas to webgl-CSDN博客

1

三、盒子模型

3.1

一、创建对象

  • 在屏幕上创建开关部件switch
1
lv_obj_t* switch1 = lv_switch_create(lv_scr_act());
  • 在按键switch1上创建开关部件switch2
1
lv_obj_t* switch2 = lv_switch_create(switch1);

二、设置大小

  • 设置宽度
1
lv_obj_set_width(lv_obj_t * obj, lv_coord_t width);
  • 设置高度
1
lv_obj_set_height(lv_obj_t * obj, lv_coord_t height);
  • 同时设置宽度和高度
1
lv_obj_set_size(lv_obj_t * obj, lv_coord_t width, lv_coord_t height);

三、设置位置

  • 原点为(0,0)，X轴向右，Y轴向下
  • 若屏幕像素为800*480，则原点的对点为(799,470)
  • 子类以父类的左上角为原点，超出父对象的区域不显示
  • 设置X轴坐标
1
lv_obj_set_x(lv_obj_t * obj, lv_coord_t x);
  • 设置Y轴坐标
1
lv_obj_set_y(lv_obj_t * obj, lv_coord_t y);
  • 同时设置X、Y轴坐标
1
lv_obj_set_pos(lv_obj_t * obj, lv_coord_t x, lv_coord_t y);

四、设置对齐方式

1. 参照父对象对齐

  • 参照父对象对齐
1
2
lv_obj_set_align(lv_obj_t * obj, 	//子对象
                 lv_align_t align); //对齐模式 LV_ALIGN_XXXX
  • 参照父对象对齐，在进行偏移
1
2
3
4
lv_obj_align(lv_obj_t * obj,    //子对象
           lv_align_t align,    //对齐模式 LV_ALIGN_XXXX
           lv_coord_t x_ofs,	//X轴偏移量
           lv_coord_t y_ofs);	//Y轴偏移量

2. 参照其它对象对齐

1
2
3
4
5
6
lv_obj_align_to(lv_obj_t * obj,    //子对象
         const lv_obj_t * base,    //参照对象
              lv_align_t align,    //对齐模式 LV_ALIGN_XXXX
              lv_coord_t x_ofs,    //X轴偏移量
              lv_coord_t y_ofs);   //Y轴偏移量

3. 对齐模式

OUT_TOP_LEFT OUT_TOP_MID OUT_TOP_RIGHT
OUT_LEFT_TOP TOP_LEFT TOP_MID TOP_RIGHT OUT_RIGHT_TOP
OUT_LEFT_MID LEFT_MID CENTER RIGHT_MID OUT_RIGHT_MID
OUT_LEFT_BOTTOM BOTTOM_LEFT BOTTOM_MID BOTTOM_RIGHT OUT_RIGHT_BOTTOM
OUT_BOTTOM_LEFT OUT_BOTTOM_MID OUT_BOTTOM_RIGHT

五、设置样式

  • 样式用于设置部件的外观，以优化显示界面和实现用户交互
1
2
3
4
5
6
static lv_style_t style;					//定义样式变量
lv_style_init(&style);						//初始化样式
lv_style_set_bg_color(&style,lv_color_hex(0xf4183));//设置背景颜色

lv_obj_t *obj = lv_boj_create(lv_scr_act());  //创建一个部件
lv_obj_add_style(obj,&style,LV_STATE_DEFAULT);//设置部件的样式
  • 添加本地样式
1
2
3
4
lv_obj_t *obj = lv_boj_create(lv_scr_act());	//创建一个部件
lv_obj_set_style_bg_color(boj,  //子对象
       lv_color_hex(0xf4b183),  //设置颜色
            LV_STATE_DEFAULT);	//样式何时生效

六、设置事件

  • 在LVGL中，当发生用户感兴趣的事情时，可以触发回调事件，以执行相关操作
  • 添加事件
1
2
3
4
lv_obj_add_event_cb(lv_obj_t * obj,    //子对象
            lv_event_cb_t event_cb,    //事件回调函数，自己定义
            lv_event_code_t filter,    //事件类型
                  void * user_data);   //用户数据
  • 删除事件
1
2
lv_obj_remove_event_cb(lv_obj_t * obj,    //子对象
               lv_event_cb_t event_cb);   a//事件回调函数
  • 不同的事件类型共用同一个回调函数
1
2
3
4
5
6
7
8
9
10
11
12
static void event_cb(lv_event_t* e)
{
    lv_event_code code = lv_event_get_code(e);	//获取事件类型
    if(code == LV_EVENT_CLICKED)     			//判断事件类型
    {
        printf("事件类型，按下后释放\r\n");		  //执行相应操作
    }
    else if(code == LV_EVENT_LONG_PRESSED)
    {
        printf("事件类型按下（长按）\r\n");    
    }
}
  • 不同的部件共用同一个回调函数
1
2
3
4
5
6
7
8
9
10
11
12
static void event_cb(lv_event_t* e)
{
    lv_obj_t *target = lv_event_get_target(e);//获取触发事件的部件
    if(target == target_obj)     			  //判断触发事件的部件
    {
        printf("父对象触发事件\r\n");		      //执行相应操作
    }
    else if(target == child_obj)
    {
        printf("子对象触发事件\r\n");    
    }
}