LVGL——部件基本属性

目录

一、大小

1、API函数

2、代码例程

二、位置

1、API函数

2、代码例程

三、对齐

1、API函数

2、代码例程

四、样式

有哪些样式属性可以设置

1、API函数

2、样式生效方式

3、代码例程

4、设置某部分的样式

5、代码例程

五、事件

1、API函数

2、代码例程

---

一、大小

1、API函数

设置宽度：lv_obj_set_width(obj, new_width);

设置高度：lv_obj_set_height(obj, new_height);

同时设置宽度、高度：lv_obj_set_size(obj, new_width, new_height);

2、代码例程

void my_gui(void)
{
    lv_obj_t* obj1 = lv_obj_create(lv_scr_act());
    lv_obj_set_width(obj1,20);
    lv_obj_set_height(obj1,30);
    //lv_obj_set_size(obj1, 40, 20);
}

二、位置

1、API函数

设置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);

2、代码例程

void my_gui(void)
{
    lv_obj_t* obj1 = lv_obj_create(lv_scr_act());
    lv_obj_set_width(obj1,20);
    lv_obj_set_height(obj1,30);
    //lv_obj_set_size(obj1, 40, 20);
    lv_obj_set_x(obj1,20);
    lv_obj_set_y(obj1,30);
    //lv_obj_set_pos(obj1,20,30);
}

三、对齐

1、API函数

参照父对象对齐：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);

 

2、代码例程

void my_gui(void)
{
    lv_obj_t* obj1 = lv_obj_create(lv_scr_act());
    lv_obj_set_width(obj1,40);
    lv_obj_set_height(obj1,30);
    //lv_obj_set_size(obj1, 40, 20);
    lv_obj_set_x(obj1,20);
    lv_obj_set_y(obj1,30);
    //lv_obj_set_pos(obj1,20,30);
    lv_obj_t* obj2 = lv_obj_create(lv_scr_act());
    lv_obj_set_width(obj2,40);
    lv_obj_set_height(obj2,30);
    lv_obj_align_to(obj1,obj2,LV_ALIGN_OUT_RIGHT_MID,10,10);
}

四、样式

有哪些样式属性可以设置

大小，位置，背景，轮廓，边框，阴影，其它

1、API函数

static lv_style_t style;   /* 定义样式变量 */

lv_style_init(&style);   /* 初始化样式 */

lv_style_set_bg_color(&style, lv_color_hex(0xf4b183));   /* 设置背景颜色 */

lv_obj_t * obj = lv_obj_create(lv_scr_act());   /* 创建一个部件 */

lv_obj_add_style(obj, & style, LV_STATE_DEFAULT);   /* 设置部件的样式 */

2、样式生效方式

enum {

    LV_STATE_DEFAULT       =  0x0000,  /* 默认状态 */

    LV_STATE_CHECKED       =  0x0001,  /* 切换或选中状态 */

    LV_STATE_FOCUSED       =  0x0002,  /* 通过键盘、编码器聚焦或通过触摸板、鼠标单击 */

    LV_STATE_FOCUS_KEY     =  0x0004,  /* 通过键盘、编码器聚焦 */

    LV_STATE_EDITED        =  0x0008,  /* 由编码器编辑 */

    LV_STATE_HOVERED       =  0x0010,  /* 鼠标悬停（现在不支持）*/

    LV_STATE_PRESSED       =  0x0020,  /* 已按下 */

    LV_STATE_SCROLLED      =  0x0040,  /* 滚动状态 */

    LV_STATE_DISABLED      =  0x0080,  /* 禁用状态 */

    …

};

3、代码例程

void my_gui(void)
{
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_bg_color(&style,lv_color_hex(0xfb3d3d));

    lv_obj_t *obj1 = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj1,&style,LV_STATE_PRESSED);
}

4、设置某部分的样式

enum {

    LV_PART_MAIN  = 0x000000,      /* 主体，像矩形一样的背景 */

    LV_PART_SCROLLBAR  = 0x010000,      /* 滚动条 */

    LV_PART_INDICATOR  = 0x020000,      /* 指示器，指示当前值 */

    LV_PART_KNOB  = 0x030000,    /* 手柄或旋钮，用于调整参数值 */

    LV_PART_SELECTED  = 0x040000,      /* 选项框，指示当前选择的选项 */

    LV_PART_ITEMS  = 0x050000,      /* 相似的元素，例如单元格 */

    LV_PART_TICKS  = 0x060000,      /* 刻度 */

    LV_PART_CURSOR  = 0x070000,      /* 光标 */

};

5、代码例程

void my_gui(void)
{
    lv_obj_t *slider = lv_slider_create(lv_scr_act());
    lv_obj_set_size(slider,100,20);
    lv_obj_set_align(slider,LV_ALIGN_CENTER);

    lv_obj_set_style_bg_color(slider,lv_color_hex(0x49bc40),LV_STATE_DEFAULT|LV_PART_INDICATOR);
}

五、事件

1、API函数

添加事件：lv_obj_add_event_cb(obj, event_cb, event_code, user_data);

2、代码例程

static void my_event_cb( lv_event_t *e )
{
	lv_event_code_t   code = lv_event_get_code(e);		 /* 第一步：获取事件类型 */
	if ( code == LV_EVENT_CLICKED )				            /* 第二步：判断事件类型 */
	{
        printf("事件类型: 按下后释放\r\n");	 		 /* 第三步：执行相应操作 */
	}
	else if ( code == LV_EVENT_LONG_PRESSED)
	{
        printf("事件类型:按下（长按）\r\n");
	}
}

void my_gui(void)
{
    lv_obj_t *objl = lv_obj_create(lv_scr_act());
    lv_obj_add_event_cb(objl, my_event_cb, LV_EVENT_CLICKED,NULL);
    lv_obj_t *obj2 = lv_obj_create(lv_scr_act());
    lv_obj_add_event_cb(obj2, my_event_cb, LV_EVENT_LONG_PRESSED,NULL);
}