2、在LVGL模拟器中了解部件的基础属性

1、基础部件

void my_gui(void)
{
    lv_obj_t *obj=lv_obj_create(lv_scr_act());
}

 

3、部件的基础属性

        3.1 大小(size)

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

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

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

        3.2 位置(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);

        3.3 对齐(alignment)

        对齐的模式如图所示，其中参照父对象对齐时使用OUT_XXX_XXX无效，因为子对象无法跑到父对象外面。

                1、参照父对象对齐

                        lv_obj_set_align(obj,LV_ALIGN_XXX);

                        lv_obj_align(obj,LV_ALIGN_XXX,x,y);

void my_gui(void)
{
    lv_obj_t *obj=lv_obj_create(lv_scr_act());
    // lv_obj_set_align(obj,LV_ALIGN_BOTTOM_LEFT);
    lv_obj_align(obj,LV_ALIGN_BOTTOM_LEFT,100,0);
}

 参照

                2、参照其他对象对齐

void my_gui(void)
{
    lv_obj_t *obj=lv_obj_create(lv_scr_act());//对象1
    lv_obj_set_size(obj,200,200);
    lv_obj_t *obj2=lv_obj_create(lv_scr_act());//对象2

    lv_obj_align_to(obj2,obj,LV_ALIGN_OUT_RIGHT_MID,0,0);
}

 

        3.4 样式(styles)（颜色的HEX值可通过截图工具获取）

        1、添加普通样式（好处是可共享，即定义的style）

void my_gui(void)
{
    static lv_style_t style; 									/* 定义样式变量 */
    lv_style_init(&style); 									/* 初始化样式 */
    lv_style_set_bg_color(&style, lv_color_hex(0x89d961)); 				/* 设置背景颜色 */
    lv_obj_t * obj = lv_obj_create(lv_scr_act()); 
    lv_obj_add_style(obj,&style,LV_STATE_DEFAULT);
}

注意：static lv_style_t style;必须定义为静态的 

         运行效果如图

        

        2、添加本地样式 

void my_gui(void)
{
    lv_obj_t *obj=lv_obj_create(lv_scr_act());
    lv_obj_set_style_bg_color(obj,lv_color_hex(0x65a8fa),LV_STATE_DEFAULT);
}

        运行效果

边框

void my_gui(void)
{
    lv_obj_t *obj=lv_obj_create(lv_scr_act());
    lv_obj_align(obj,LV_ALIGN_CENTER,0,0);
    lv_obj_set_style_border_color(obj,lv_color_hex(0x04ff50),LV_STATE_DEFAULT);//绿色
    lv_obj_set_style_border_width(obj,10,LV_STATE_DEFAULT);//边宽
    lv_obj_set_style_border_opa(obj,100,LV_STATE_DEFAULT);//边框透明度，最大值255
    lv_obj_set_style_bg_color(obj,lv_color_hex(0x65a8fa),LV_STATE_PRESSED);//蓝色
}

 

鼠标按下时的效果

 

轮廓

void my_gui(void)
{
    //边框
    lv_obj_t *obj=lv_obj_create(lv_scr_act());
    lv_obj_align(obj,LV_ALIGN_CENTER,0,0);
    lv_obj_set_style_border_color(obj,lv_color_hex(0x04ff50),LV_STATE_DEFAULT);//绿色
    lv_obj_set_style_border_width(obj,10,LV_STATE_DEFAULT);//边宽
    lv_obj_set_style_border_opa(obj,100,LV_STATE_DEFAULT);//边框透明度，最大值255
    lv_obj_set_style_bg_color(obj,lv_color_hex(0x65a8fa),LV_STATE_PRESSED);//蓝色
    //轮廓
    lv_obj_set_style_outline_color(obj,lv_color_hex(0xfefe00),LV_STATE_DEFAULT);//黄色
    lv_obj_set_style_outline_width(obj,10,LV_STATE_DEFAULT);//轮廓
    lv_obj_set_style_outline_opa(obj,100,LV_STATE_DEFAULT);//轮廓透明度，最大值255
}

默认及按下鼠标的效果

 

 

 进度条

void my_gui(void)
{
    lv_obj_t *slider=lv_slider_create(lv_scr_act());
    lv_obj_set_align(slider,LV_ALIGN_CENTER);
    lv_obj_set_style_bg_color(slider,lv_color_hex(0xfa3e0c),LV_STATE_PRESSED);//红色
    lv_obj_set_style_bg_color(slider,lv_color_hex(0xfa3e0c),LV_STATE_DEFAULT|LV_PART_INDICATOR);//红色
}

 

 

        3.5 事件(events)

        1、不同的事件类型共用一个事件回调函数

static void my_event_cb(lv_event_cb_t *e);

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

static void my_event_cb(lv_event_cb_t *e)
{
    lv_event_code_t code=lv_event_get_code(e);
    if(code==LV_EVENT_CLICKED)
    {
        printf("LV_EVENT_CLICKED\n");
    }
    else if(code==LV_EVENT_LONG_PRESSED)
    {
        printf("LV_EVENT_LONG_PRESSED\n");
    }
}

 效果如图

 2、不同的部件共用一个事件回调函数

//部件需要定义在全局，回调函数才能使用
lv_obj_t *obj;
lv_obj_t *obj2;

static void my_event_cb(lv_event_cb_t *e);

void my_gui(void)
{
    obj=lv_obj_create(lv_scr_act());
    lv_obj_set_align(obj,LV_ALIGN_CENTER);//obj部件在中间
    obj2=lv_obj_create(lv_scr_act());//obj2默认处于左上角
    lv_obj_add_event_cb(obj,my_event_cb,LV_EVENT_CLICKED,NULL);
    lv_obj_add_event_cb(obj2,my_event_cb,LV_EVENT_LONG_PRESSED,NULL);
}

static void my_event_cb(lv_event_cb_t *e)
{
    lv_obj_t *target=lv_event_get_target(e);

    if(target==obj)
    {
        printf("obj\n");
    }
    else if(target==obj2)
    {
        printf("obj2\n");
    }
}


/*上述代码在codeblock中没问题，但实际在Keil工程中lv_event_cb_t 和lv_event_t 类型报错，修改后代码如下*/
lv_obj_t *obj;
lv_obj_t *obj2;

static void my_event_cb(lv_event_t *e);

void my_gui(void)
{
    obj=lv_obj_create(lv_scr_act());
    lv_obj_set_align(obj,LV_ALIGN_CENTER);//obj部件在中间
    obj2=lv_obj_create(lv_scr_act());//obj2默认处于左上角
    lv_obj_add_event_cb(obj,my_event_cb,LV_EVENT_CLICKED,NULL);
    lv_obj_add_event_cb(obj2,my_event_cb,LV_EVENT_LONG_PRESSED,NULL);
}

static void my_event_cb(lv_event_t *e)
{
    lv_obj_t *target=lv_event_get_target(e);

    if(target==obj)
    {
        printf("obj\n");
    }
    else if(target==obj2)
    {
        printf("obj2\n");
    }
}

 效果如下