LVGL学习第一站对象

       本文章只是用来记录学习过程的，如果大家想看视频，请输入一下链接。由韦东山老师创作。

https://video.100ask.net/p/t_pc/course_pc_detail/video/v_61c5a387e4b0cca4a4e8b70e?product_id=p_61c5a317e4b0cca4a4e8b6f1&content_app_id=&type=6

        在LVGL中，使用继承的实现进行开发，类似与C++的继承和基类，大白话就是一生二，二生三，三生万物。如下图所示：

        

 图片来源于韦东山老师，如果侵权请联系删除。

1.lvgl对象 

lv_obj_t 是一个基类，它既可以生成对象的大小，也可以生成任何组件。 如下代码所示：

 2.基础对象

    2.2.lvgl基础对象操作

       2.2.1 三层屏幕(活动屏幕最长使用)

lv_scr_act(void); 	// 活动屏幕	  disp->act_scr
lv_layer_top (void); 	// 顶层	 disp->top_layer
lv_layer_sys (void);	// 系统层	 disp->sys_layer

         2.2.2基础对象的大小

//设置宽度：
lv_obj_set_width(obj, new_width);
设置高度：
lv_obj_set_height(obj, new_height);
同时设置宽度、高度：
lv_obj_set_size(obj, new_ width, new_ height);

例程代码测试

/*基础对象大小*/
void lvgl_obj_size()
{
	lv_obj_t * container = lv_obj_create(lv_scr_act());
	lv_obj_set_size(container, 100, 100);
	lv_obj_center(container);

	
}

       2.2.3基础对象的位置（position）

设置x轴方向的坐标位置：
lv_obj_set_x(obj, new_x);
设置y轴方向的坐标位置：
lv_obj_set_y(obj, new_y);
同时设置x、y坐标位置：
lv_obj_set_pos(obj, new_x, new_y);  // position

        2.2.4对齐方式

参照父对象对齐：
lv_obj_set_align(obj, LV_ALIGN_...);
参照父对象对齐后再设置坐标位置：
lv_obj_align(obj, LV_ALIGN_..., x, y);
参照另一个对象(无父子关系)对齐后设置坐标位置：
lv_obj_align_to(obj_to_align, obj_referece, LV_ALIGN_..., x, y)

对齐参数类型如下图所示

 测试代码

void lv_100ask_demo_course_2_2_3(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_align(obj, LV_ALIGN_CENTER);

    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Hello, LVGL!");
    lv_obj_align_to(label, obj, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);

    //printf("w:%d\n", lv_obj_get_x(obj));
    //printf("h:%d\n", lv_obj_get_y(obj));
}

/*创建一个中心屏幕按照父对象中心对齐，创建一个lable让lable按照父对象底部对齐*/

  2.3基础对象的盒子模型 

        作用：在使用样式时，便是对以下的盒子进行操作。

        如图所示：

        

   介绍：

   边界(bounding)：元素的宽度/高度围起来的区域(整个盒子)。

   边框(border)：边框有大小和颜色等属性(相当于盒子的厚度和它的颜色)。

   填充(padding)：对象两侧与其子对象之间的空间(盒子的填充物)。

   内容(content)：如果边界框按边框宽度和填充的大小缩小，则显示其大小的内容区域(盒子实际装东西的区域)。

   轮廓(outline) ：LVGL中没有外边距(margin)的概念(盒子之间的距离)，确认代之的是轮廓(outline)。它是绘制于元素(盒子)周围的一条线，它不占据空间，位于边框边缘的外围，可起到突出元素(盒子)的作用。在浏览器里，当鼠标点击或使用Tab键让一个选项或者一个图片获得焦点的时候，这个元素就会多了一个轮廓框围绕。轮廓(outline) 。

   2.4样式（正常样式和本地样式）

         注意：本地样式的优先级会大于正常样式。

          特点及作用：①它可以保存边框宽度、文本颜色等属性。②在赋值过程中，可以指定目标部分和目标状态。③一个样式可以给多个对象使用（正常样式）。④样式可以级联，也就是可以将多个样式分配给一个对象。⑤样式具有父级继承功能，前提是自己未设置其样式。

        操作步骤：

                ①：初始化样式：  

static lv_style_t style_obj;  /*样式的变量不可以是局部变量*/
lv_style_init(&style_obj);

                ②：设置样式属性

lv_style_set_<property_name>(&style, <value>); /*接口函数*/


/*示例说明*/
lv_style_set_bg_color(&style_obj, lv_color_hex(0x000000));   // 设置背景色	


lv_style_set_bg_opa(&style_obj, LV_OPA_50);	                    // 设置背景透明度

                ③添加(应用)样式到对象

/*函数接口介绍*/
lv_obj_add_style(obj, &style, <selector>)

/*示例*/
lv_obj_add_style(obj, &style_obj, 0);   		            // 默认(常用)

lv_obj_add_style(obj, &style_obj, LV_STATE_PRESSED);  // 在对象被按下时应用样式

                ④删除样式

/*删除对象的所有样式*/
lv_obj_remove_style_all(obj);


/*删除对象的特定样式*/
lv_obj_remove_style(obj, &style_obj, selector);

   测试代码

void lv_100ask_demo_course_2_2_5(void)
{
    // 正常样式
    static lv_style_t style_obj;

		/*初始化样式*/
	  lv_style_init(&style_obj);
	  /*设置样式属性*/
    lv_style_set_bg_color(&style_obj, lv_color_hex(0x000000));      // 设置背景色
    lv_style_set_text_color(&style_obj, lv_color_hex(0xc43e1c));    // 设置文字颜色
    lv_style_set_bg_color(&style_obj, lv_color_hex(0xc43e1c));    // 设置背景色
    lv_style_set_bg_opa(&style_obj, 30);                          // 设置透明度

    // 创建对象
    lv_obj_t * obj = lv_obj_create(lv_scr_act());

    lv_obj_t * obj2 = lv_obj_create(lv_scr_act());
    lv_obj_align(obj2, LV_ALIGN_CENTER, 0 ,0);
	
		 // 添加样式到对象
    lv_obj_add_style(obj, &style_obj, 0);                   // 默认状态: LV_STATE_DEFAULT
    lv_obj_add_style(obj2, &style_obj, 0);                  // 默认状态: LV_STATE_DEFAULT
}