参考的课程:

全志韦东山的课程:https://www.100ask.net/p/t_pc/course_pc_detail/column/p_61c5a317e4b0cca4a4e8b6f1?product_id=p_61c5a317e4b0cca4a4e8b6f1

例程1_// 基础对象(lv_obj),"Hello, LVGL!"

void lvgl_demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj, LV_PCT(20), LV_PCT(10));
    lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);

    lv_obj_t * label = lv_label_create(obj);
    lv_label_set_text(label, "Hello, LVGL!");
    lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);
}

 LVGL_API解析:

lv_obj_t * obj = lv_obj_create(lv_scr_act());

//创建一个基础对象,基础对象样式默认为矩形,这里的lv_scr_act()是LVGL提供的API,表示获取当前屏幕对象

lv_obj_set_size(obj, LV_PCT(20), LV_PCT(10));

//lv_obj_set_size函数设置对象的大小,使用LV_PCT宏指定百分比大小,这里设置为20% x 10%

lv_obj_align(obj, LV_ALIGN_CENTER, 0, 0);

//lv_obj_align函数将对象置于屏幕中心,使用LV_ALIGN_CENTER宏指定对齐方式,其中第三个和第四个参数分别表示在水平和垂直方向上的偏移量。

//有宏定义如下:

  • LV_ALIGN_DEFAULT: 默认对齐方式,由具体对象确定。
  • LV_ALIGN_TOP_LEFT: 左上角对齐。
  • LV_ALIGN_TOP_MID: 上中对齐。
  • LV_ALIGN_TOP_RIGHT: 右上角对齐。
  • LV_ALIGN_BOTTOM_LEFT: 左下角对齐。
  • LV_ALIGN_BOTTOM_MID: 下中对齐。
  • LV_ALIGN_BOTTOM_RIGHT: 右下角对齐。
  • LV_ALIGN_LEFT_MID: 左中对齐。
  • LV_ALIGN_RIGHT_MID: 右中对齐。
  • LV_ALIGN_CENTER: 中心对齐。

lv_obj_t * label = lv_label_create(obj);
lv_label_set_text(label, "Hello, LVGL!");
lv_obj_align(label, LV_ALIGN_CENTER, 0, 0);

//lv_label_create函数在上一步创建的对象上创建一个标签对象,然后使用lv_label_set_text函数设置标签文本为“Hello, LVGL!”。最后,再次使用lv_obj_align函数将标签对象置于上一步创建的对象中心。

自己造个轮_1:

额?...这几个API还能玩出花来不成?...

例程2_// 基础对象的大小(size)

void lvgl_demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_width(obj, 300);
    lv_obj_set_height(obj, 500);
    //lv_obj_set_size(obj,300, 300);

    printf("w:%d\n", lv_obj_get_width(obj));
    printf("h:%d\n", lv_obj_get_height(obj));
}

这段代码创建了一个基本对象,并且将这个对象的长和宽设定为300和500,通过lv_obj_get_width(obj)和lv_obj_get_width(obj)获取到对象的长宽

 但是奇怪的来了,打印的值是0

 可以看到,返回值类型是一个16位整型,用%d没有问题?但为什么呢?

GPT是这样说的:

但是不行,在添加了lv_obj_invalidate(obj)后仍没有能够显示对象的长和宽,问了另一个模型:

 更改代码后,结果确实是打印出来了:

自己造个轮_2

题目:建立一个长500宽300的基本对象,并通过lv_obj_get_width(obj)等方式获取到相关数据,在第一个创建的对象的右边紧贴着建立一个长300宽500的基本对象

void lvgl_demo(void)
{
    lv_obj_t * obj_1 = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj_1,500, 300);
    lv_obj_align(obj_1, LV_ALIGN_TOP_LEFT, 0, 0);

    lv_task_handler(); // 处理LVGL任务循环

    lv_obj_t * obj_2 = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj_2,lv_obj_get_height(obj_1), lv_obj_get_width(obj_1));
    lv_obj_align(obj_1, LV_ALIGN_TOP_LEFT, 300, 0);

    printf("w:%d\n", lv_obj_get_width(obj_1));
    printf("h:%d\n", lv_obj_get_height(obj_1));
}

例程3_// 基础对象的位置(position) 

void lvgl_demo(void)
{
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_set_size(obj,500, 300);
    lv_obj_set_x(obj, 200);
    lv_obj_set_y(obj, -50);
    //lv_obj_set_pos(obj, 1300, 600);
    //lv_obj_set_align(obj, LV_ALIGN_CENTER);
    //lv_obj_align(obj, LV_ALIGN_CENTER, 100, 100);

    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));
}

相关API:这几句都是用于调整对象位置的。

lv_obj_set_x(obj, 200);
lv_obj_set_y(obj, -50);
lv_obj_set_pos(obj, 1300, 600);
lv_obj_set_align(obj, LV_ALIGN_CENTER);
lv_obj_align(obj, LV_ALIGN_CENTER, 100, 100);

例程4_// 基础对象的盒子模型(border-box)

void lv_100ask_demo_course_2_2_4(void)
{
    lv_obj_t * obj1 = lv_obj_create(lv_scr_act());
    lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);
    //lv_obj_set_style_border_width(obj1, 10, 0);
    //lv_obj_set_style_outline_width(obj1, 10, 0);

#if 1
    lv_obj_t * obj2 = lv_obj_create(lv_scr_act());
    lv_obj_t * obj_out_top = lv_obj_create(lv_scr_act());
    lv_obj_t * obj_out_bottom = lv_obj_create(lv_scr_act());
    lv_obj_t * obj_out_left = lv_obj_create(lv_scr_act());
    lv_obj_t * obj_out_right = lv_obj_create(lv_scr_act());
    //lv_obj_set_style_outline_width(obj_out_left, 10, 0);

    lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);
    lv_obj_align_to(obj_out_top, obj1, LV_ALIGN_OUT_TOP_MID, 0, 0);
    lv_obj_align_to(obj_out_bottom, obj1, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
    lv_obj_align_to(obj_out_left, obj1, LV_ALIGN_OUT_LEFT_MID, 0, 0);
    lv_obj_align_to(obj_out_right, obj1, LV_ALIGN_OUT_RIGHT_MID, 0, 0);
    lv_obj_align_to(obj2, obj_out_right, LV_ALIGN_OUT_TOP_MID, 0, 0);
#endif
}

 陌生API:

lv_obj_set_style_border_width(obj1, 10, 0);

//设置对象的边框宽度为10个像素。

 lv_obj_set_style_outline_width(obj1, 10, 0);

//设置对象的轮廓线宽度为10个像素。

lv_obj_align(obj1, LV_ALIGN_CENTER, 0, 0);
lv_obj_align_to(obj_out_top, obj1, LV_ALIGN_OUT_TOP_MID, 0, 0);
lv_obj_align_to(obj_out_bottom, obj1, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);
lv_obj_align_to(obj_out_left, obj1, LV_ALIGN_OUT_LEFT_MID, 0, 0);
lv_obj_align_to(obj_out_right, obj1, LV_ALIGN_OUT_RIGHT_MID, 0, 0);

这段代码就是将创建的四个对象分别放置在obj1对象的上下左右,四个地方,且无偏移量,比较简单。

 例程5_// 基础对象的盒子模型(border-box)

 滑杆样式:可以当作单独的一个零件

static void lv_example_slider_2(void)
{
    /*Create a transition*/
    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, 0};
    static lv_style_transition_dsc_t transition_dsc;
    lv_style_transition_dsc_init(&transition_dsc, props, lv_anim_path_linear, 300, 0, NULL);

    static lv_style_t style_main;           // 矩形背景部分
    static lv_style_t style_indicator;      // 指针部分
    static lv_style_t style_knob;           // 旋钮部分
    static lv_style_t style_pressed_color;  // 对象某部分被按下时,该部分样式应用的颜色

    // 矩形背景部分
    lv_style_init(&style_main);
    lv_style_set_bg_opa(&style_main, LV_OPA_COVER);
    lv_style_set_bg_color(&style_main, lv_color_hex3(0xbbb));
    //lv_style_set_outline_width(&style_main, 5);
    //lv_style_set_border_width(&style_main, 2);
    lv_style_set_radius(&style_main, LV_RADIUS_CIRCLE);
    lv_style_set_pad_ver(&style_main, -2); /*Makes the indicator larger*/

    // 指针部分
    lv_style_init(&style_indicator);
    lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);
    lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_radius(&style_indicator, LV_RADIUS_CIRCLE);
    lv_style_set_transition(&style_indicator, &transition_dsc);

    // 旋钮部分
    lv_style_init(&style_knob);
    lv_style_set_bg_opa(&style_knob, LV_OPA_COVER);
    lv_style_set_bg_color(&style_knob, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_border_color(&style_knob, lv_palette_darken(LV_PALETTE_CYAN, 3));
    lv_style_set_border_width(&style_knob, 2);
    lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
    lv_style_set_pad_all(&style_knob, 6); /*Makes the knob larger*/
    lv_style_set_transition(&style_knob, &transition_dsc);

    // 对象某部分被按下时,该部分样式应用的颜色
    lv_style_init(&style_pressed_color);
    lv_style_set_bg_color(&style_pressed_color, lv_palette_darken(LV_PALETTE_CYAN, 2));

    /*Create a slider and add the style*/
    lv_obj_t * slider = lv_slider_create(lv_scr_act());

    // 体验流程:先体验 lv_obj_add_style 都被注释时的效果;然后一个个去掉注释
    lv_obj_remove_style_all(slider);                                                        // 删除对象的所有样式,然后下面再添加我们自定义的样式
    lv_obj_add_style(slider, &style_main, LV_PART_MAIN);                                    // 矩形背景部分
    lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);                          // 指针部分
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_INDICATOR | LV_STATE_PRESSED);   // 当指针部分被按下的时候,指针部分应用该样式
    lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);                                    // 旋钮部分,像按钮一样可以抓取调整值
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_KNOB | LV_STATE_PRESSED);        // 当旋钮部分被按下的时候,旋钮部分应用该样式

    lv_obj_center(slider);
}

这个样式部件可以大致分为下面几部分:

1.//矩形背景部分

    //矩形背景部分
    lv_style_init(&style_main);
    lv_style_set_bg_opa(&style_main, LV_OPA_COVER);
    lv_style_set_bg_color(&style_main, lv_color_hex3(0xbbb));
//    lv_style_set_outline_width(&style_main, 1);
//    lv_style_set_border_width(&style_main, 1);
    lv_style_set_radius(&style_main, LV_RADIUS_CIRCLE);
    lv_style_set_pad_ver(&style_main, 5); /*Makes the indicator larger*/

初始化一个lv_style_t类型的对象style_main,用于设置矩形背景的样式lv_style_init(&style_main);

设置矩形背景的透明度为完全不透明。

lv_style_set_bg_opa(&style_main, LV_OPA_COVER);

可选参数有:分别对应透明度0-100

LV_OPA_0      = 0,
LV_OPA_10     = 25,
LV_OPA_20     = 51,
LV_OPA_30     = 76,
LV_OPA_40     = 102,
LV_OPA_50     = 127,
LV_OPA_60     = 153,
LV_OPA_70     = 178,
LV_OPA_80     = 204,
LV_OPA_90     = 229,
LV_OPA_100    = 255,

设置矩形背景的颜色为灰色。

lv_style_set_bg_color(&style_main, lv_color_hex3(0xbbb));

可选参数:这个不好说吧,自己选了,通过色表自己选

设置矩形背景的圆角半径为圆形。

lv_style_set_radius(&style_main, LV_RADIUS_CIRCLE);

可选参数:无,仅有一个

 

设置矩形背景的垂直填充为负值,使得指示器更大。

lv_style_set_pad_ver(&style_main, -2);

当-2这个参数越小,拖动的那条线就越宽

如下是-7和5参数下的对比:

-7

 5

 

 2.//指针部分

    //指针部分
    lv_style_init(&style_indicator);
    lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);
    lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));
    lv_style_set_radius(&style_indicator, LV_RADIUS_CIRCLE);
    lv_style_set_transition(&style_indicator, &transition_dsc);

设置指针的背景颜色为青色

lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));

可用参数:

typedef enum {
    LV_PALETTE_RED,
    LV_PALETTE_PINK,
    LV_PALETTE_PURPLE,
    LV_PALETTE_DEEP_PURPLE,
    LV_PALETTE_INDIGO,
    LV_PALETTE_BLUE,
    LV_PALETTE_LIGHT_BLUE,
    LV_PALETTE_CYAN,
    LV_PALETTE_TEAL,
    LV_PALETTE_GREEN,
    LV_PALETTE_LIGHT_GREEN,
    LV_PALETTE_LIME,
    LV_PALETTE_YELLOW,
    LV_PALETTE_AMBER,
    LV_PALETTE_ORANGE,
    LV_PALETTE_DEEP_ORANGE,
    LV_PALETTE_BROWN,
    LV_PALETTE_BLUE_GREY,
    LV_PALETTE_GREY,
    _LV_PALETTE_LAST,
    LV_PALETTE_NONE = 0xff,
} lv_palette_t;

设置指针的过渡效果为自定义的过渡效果。

lv_style_set_transition(&style_indicator, &transition_dsc);

怎么说呢,就是按下之后颜色加深的效果等动画变化是逐步进行的,而不是一下子就变深色的

 3.//旋钮部分

//旋钮部分
//初始化一个lv_style_t类型的对象style_knob,用于设置旋钮的样式
lv_style_init(&style_knob);
//设置旋钮的透明度为完全不透明
lv_style_set_bg_opa(&style_knob, LV_OPA_COVER);
//设置旋钮的背景颜色为青色
lv_style_set_bg_color(&style_knob, lv_palette_main(LV_PALETTE_CYAN));
//设置旋钮的边框颜色为深色青色
lv_style_set_border_color(&style_knob, lv_palette_darken(LV_PALETTE_CYAN, 3));
//设置旋钮的边框宽度为2像素
lv_style_set_border_width(&style_knob, 2);
//设置旋钮的圆角半径为圆形
lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
//设置旋钮的内部填充为6像素,使旋钮更大
lv_style_set_pad_all(&style_knob, 6);
//设置旋钮的过渡效果为自定义的过渡效果
lv_style_set_transition(&style_knob, &transition_dsc);

4.注册部分

    //对象某部分被按下时,该部分样式应用的颜色
    lv_style_init(&style_pressed_color);
    lv_style_set_bg_color(&style_pressed_color, lv_palette_darken(LV_PALETTE_CYAN, 2));

    //Create a slider and add the style
    lv_obj_t * slider = lv_slider_create(lv_scr_act());

    //体验流程:先体验 lv_obj_add_style 都被注释时的效果;然后一个个去掉注释
    lv_obj_remove_style_all(slider);                                                        // 删除对象的所有样式,然后下面再添加我们自定义的样式
    lv_obj_add_style(slider, &style_main, LV_PART_MAIN);                                    // 矩形背景部分
    lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);                          // 指针部分
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_INDICATOR | LV_STATE_PRESSED);   // 当指针部分被按下的时候,指针部分应用该样式
    lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);                                    // 旋钮部分,像按钮一样可以抓取调整值
    lv_obj_add_style(slider, &style_pressed_color, LV_PART_KNOB | LV_STATE_PRESSED);        // 当旋钮部分被按下的时候,旋钮部分应用该样式

造个轮子_5

一个对象内包含一个滑杆,在旁边注释点文字,看着像一个小组件

例程6_// 基础对象的事件(events)、事件冒泡

static void my_event_cb(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);        // 获取触发事件的部件(对象)
    lv_event_code_t code = lv_event_get_code(e);    // 获取当前部件(对象)触发的事件代码
    lv_obj_t * label = lv_event_get_user_data(e);   // 获取添加事件时传递的用户数据

    switch(code){
        case LV_EVENT_PRESSED:
            lv_label_set_text(label, "LV_EVENT_PRESSED");
            lv_obj_set_style_bg_color(obj, lv_color_hex(0xc43e1c), 0);  // 通过本地样式(私有样式)设置背景色
            printf("LV_EVENT_PRESSED\n");
            break;
        case LV_EVENT_LONG_PRESSED:
            lv_label_set_text(label, "LV_EVENT_LONG_PRESSED");
            lv_obj_set_style_bg_color(obj, lv_color_hex(0x4cbe37), 0);  // 通过本地样式(私有样式)设置背景色
            printf("LV_EVENT_LONG_PRESSED\n");
            break;
        default:
            //printf("NONE\n");
            break;
    }
}

void lv_100ask_demo_course_2_2_6(void)
{
    /* 创建基础部件(对象) */
    lv_obj_t * obj = lv_obj_create(lv_scr_act());

    /* 创建label部件(对象) */
    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Event Test");   // 设置label展示的文字
    lv_obj_center(label);               // 将对象与其父对象的中心对齐,这里的父对象是屏幕:lv_scr_act()

    // 为obj1添加事件回调函数,所有的事件类型都能触发该回调函数
    lv_obj_add_event_cb(obj, my_event_cb, LV_EVENT_ALL, label);
}

上面这段代码的API,之前都讲过,但这里引入了一个"事件的概念"在这里以obj对象作为事件触发对象,当用户不论对obj对象做什么操作,都将进入到my_event_cb回调函数中,并根据switch分支做出相应的代码操作:

短按:

 长按:

 十分简单好懂啊,但因为也太简单了,一下子也想不到造什么轮子

自己造个轮子_6——1

其实除了短按与长按外,还有别的触发(事件)方式:(但我不太会用)

  • LV_EVENT_ALL: 所有事件

  • LV_EVENT_PRESSED: 对象被按下

  • LV_EVENT_PRESSING: 对象正在被按下(在按下过程中连续调用)

  • LV_EVENT_PRESS_LOST: 对象正在被按下,但光标/手指滑出了对象

  • LV_EVENT_SHORT_CLICKED: 对象被按下一小段时间后释放。如果被滚动,则不调用。

  • LV_EVENT_LONG_PRESSED: 对象被按下至少 long_press_time 毫秒。如果被滚动,则不调用。

  • LV_EVENT_LONG_PRESSED_REPEAT: 在每 long_press_repeat_time 毫秒后调用一次。如果被滚动,则不调用。

  • LV_EVENT_CLICKED: 如果未被滚动,在释放时调用(与长按无关)

  • LV_EVENT_RELEASED: 对象被释放

  • LV_EVENT_SCROLL_BEGIN: 开始滚动

  • LV_EVENT_SCROLL_END: 滚动结束

  • LV_EVENT_SCROLL: 滚动

  • LV_EVENT_GESTURE: 检测到手势。使用 lv_indev_get_gesture_dir(lv_indev_get_act()) 来获取手势。

  • LV_EVENT_KEY: 发送一个键给对象。使用 lv_indev_get_key(lv_indev_get_act()) 来获取键。

  • LV_EVENT_FOCUSED: 对象被聚焦

  • LV_EVENT_DEFOCUSED: 对象失去聚焦

  • LV_EVENT_LEAVE: 对象失去聚焦,但仍被选中

  • LV_EVENT_HIT_TEST: 执行高级命中测试

  • LV_EVENT_COVER_CHECK: 检查对象是否完全覆盖了一个区域。事件参数是 lv_cover_check_info_t *

  • LV_EVENT_REFR_EXT_DRAW_SIZE: 获取对象周围所需的额外绘制区域(例如阴影)。事件参数是 lv_coord_t * 以存储大小。

  • LV_EVENT_DRAW_MAIN_BEGIN: 开始主绘制阶段

  • LV_EVENT_DRAW_MAIN: 执行主绘制

  • LV_EVENT_DRAW_MAIN_END: 完成主绘制阶段

  • LV_EVENT_DRAW_POST_BEGIN: 开始后绘制阶段(当所有子对象都被绘制时)

  • LV_EVENT_DRAW_POST: 执行后绘制阶段(当所有子对象都被绘制时)

  • LV_EVENT_DRAW_POST_END: 完成后绘制阶段(当所有子对象都被绘制时)

  • LV_EVENT_DRAW_PART_BEGIN: 开始绘制部分。事件参数是 lv_obj_draw_dsc_t *

  • LV_EVENT_DRAW_PART_END: 完成部分绘制。事件参数是 lv_obj_draw_dsc_t *

  • LV_EVENT_VALUE_CHANGED: 对象的值已更改(例如滑块移动)

  • LV_EVENT_INSERT: 向对象插入文本。事件数据是要插入的 char *

  • LV_EVENT_REFRESH: 通知对象刷新其上的一些内容(供用户使用)

  • LV_EVENT_READY: 进程已完成

  • LV_EVENT_CANCEL: 进程已被取消

  • LV_EVENT_DELETE: 对象正在被删除

  • LV_EVENT_CHILD_CHANGED: 子对象已被移除、添加或其大小、位置已更改

  • LV_EVENT_CHILD_CREATED: 子对象已创建,总是在所有父对象中冒泡

  • LV_EVENT_CHILD_DELETED: 子对象已被删除,总是在所有父对象中冒泡

  • LV_EVENT_SCREEN_UNLOAD_START: 屏幕卸载已开始,在调用 scr_load 时立即触发

  • LV_EVENT_SCREEN_LOAD_START: 屏幕加载已开始,在屏幕更改延迟过后触发

  • LV_EVENT_SCREEN_LOADED: 屏幕已加载

  • LV_EVENT_SCREEN_UNLOADED: 屏幕已卸载

  • LV_EVENT_SIZE_CHANGED: 对象坐标/大小已更改

  • LV_EVENT_STYLE_CHANGED: 对象的样式已更改

  • LV_EVENT_LAYOUT_CHANGED: 子对象位置已更改,因为布局重新计算

  • LV_EVENT_GET_SELF_SIZE: 获取小部件的内部大小

  • _LV_EVENT_LAST: 默认事件的数量

  • LV_EVENT_PREPROCESS = 0x80: 这是一个标志,可以与事件一起设置,以便在类默认事件处理之前进行处理

轮子1:以LV_EVENT_RELEASED(对象被释放)来触发case分支:

static void my_event_cb(lv_event_t * e)
{
    lv_obj_t * obj = lv_event_get_target(e);        // 获取触发事件的部件(对象)
    lv_event_code_t code = lv_event_get_code(e);    // 获取当前部件(对象)触发的事件代码
    lv_obj_t * label = lv_event_get_user_data(e);   // 获取添加事件时传递的用户数据

    switch(code){
        case LV_EVENT_PRESSED:
            lv_label_set_text(label, "LV_EVENT_PRESSED");
            lv_obj_set_style_bg_color(obj, lv_color_hex(0xc43e1c), 0);  // 通过本地样式(私有样式)设置背景色
            printf("LV_EVENT_PRESSED\n");
            break;
        case LV_EVENT_RELEASED:
            lv_label_set_text(label, "LV_EVENT_RELEASED");
            lv_obj_set_style_bg_color(obj, lv_color_hex(0x4cbe37), 0);  // 通过本地样式(私有样式)设置背景色
            printf("LV_EVENT_RELEASED\n");
            break;
        default:
            //printf("NONE\n");
            break;
    }
}

void lvgl_demo(void)
{
    /* 创建基础部件(对象) */
    lv_obj_t * obj = lv_obj_create(lv_scr_act());

    /* 创建label部件(对象) */
    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "Event Test");   // 设置label展示的文字
    lv_obj_center(label);               // 将对象与其父对象的中心对齐,这里的父对象是屏幕:lv_scr_act()

    // 为obj1添加事件回调函数,所有的事件类型都能触发该回调函数
    lv_obj_add_event_cb(obj, my_event_cb, LV_EVENT_ALL, label);
}

按下后放开鼠标即可

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐