本篇文章目录导航

♠♠ LVGL控件-环形加载器、LED、列表、下拉列表
♣♣♣♣ 一、LVGL 环形加载器部件
♦♦♦♦♦♦♦♦ 1.1 环形加载器部件组成部分
♦♦♦♦♦♦♦♦ 1.2 环形加载器部件基本API
♦♦♦♦♦♦♦♦ 1.3 实验小演示（提示当前任务正在加载）
♣♣♣♣ 二、LVGL LED部件
♦♦♦♦♦♦♦♦ 2.1 LED部件组成部分
♦♦♦♦♦♦♦♦ 2.2 LED部件基本API
♦♦♦♦♦♦♦♦ 2.3 实验小演示(心跳灯)
♣♣♣♣ 三、LVGL 列表部件
♦♦♦♦♦♦♦♦ 3.1 列表部件组成部分
♦♦♦♦♦♦♦♦ 3.2 列表部件基本API
♦♦♦♦♦♦♦♦ 3.3 实验小演示
♣♣♣♣ 四、LVGL 下拉列表部件
♦♦♦♦♦♦♦♦ 4.1 下拉列表部件组成部分
♦♦♦♦♦♦♦♦ 4.2 下拉列表部件基本API
♦♦♦♦♦♦♦♦ 4.3 实验小演示

LVGL控件-环形加载器、LED、列表、下拉列表

一、LVGL 环形加载器部件

加载器部件常用于提示当前任务正在加载。

效果图：

1.1 环形加载器部件组成部分

主体（LV_PART_MAIN）
手柄（LV_PART_KNOB）
指示器（LV_PART_INDICATOR）

1.2 环形加载器部件基本API

创建加载器部件：

/* spin_time为指示器旋转一周所需要的时间（ms），arc_length为指示器长度 */
lv_obj_t * spinner = lv_spinner_create(parent, spin_time, arc_length);

/* V9版本 */
lv_obj_t * spinner = lv_spinner_create(parent);

设置圆弧颜色：

lv_obj_set_style_arc_color(spinner, lv_color_hex(0x4a9f00), LV_PART_MAIN);        /* 设置主体圆弧颜色 */
lv_obj_set_style_arc_color(spinner, lv_color_hex(0x83bd55), LV_PART_INDICATOR);   /* 设置指示器圆弧颜色 */

设置圆弧宽度：

lv_obj_set_style_arc_width(spinner, 30, LV_PART_MAIN);        /* 设置主体圆弧宽度 */
lv_obj_set_style_arc_width(spinner, 30, LV_PART_INDICATOR);   /* 设置指示器圆弧宽度 */

1.3 实验小演示（提示当前任务正在加载）

void my_gui(void)
{
    lv_obj_t *spinner = lv_spinner_create(lv_scr_act());   /* 环形加载器 */
    lv_obj_center(spinner);                                /* 居中环形加载器部件 */

    lv_obj_set_style_arc_color(spinner, lv_color_hex(0xffff00), LV_PART_MAIN);        /* 设置主体圆弧颜色，黄色  */
    lv_obj_set_style_arc_color(spinner, lv_color_hex(0x00ff00), LV_PART_INDICATOR);   /* 设置指示器圆弧颜色，绿色 */

    lv_obj_set_style_arc_width(spinner, 30, LV_PART_MAIN);        /* 设置主体圆弧宽度 */
    lv_obj_set_style_arc_width(spinner, 30, LV_PART_INDICATOR);   /* 设置指示器圆弧宽度 */
}

演示视频：提示当前任务正在加载

二、LVGL LED部件

LED部件常用于指示控制对象的状态。

效果图：

2.1 LED部件组成部分

主体（LV_PART_MAIN）

2.2 LED部件基本API

创建LED部件：

lv_obj_t *led = lv_led_create(parent);    /* 默认是打开状态 */

设置LED颜色、亮度：

lv_led_set_color(led, lv_color_hex(0xff0000));    /* 设置LED颜色 */
lv_led_set_brightness(led, 0);                    /* 设置LED亮度，范围0~255 */

设置LED状态：

lv_led_on(led);        /* 打开LED(设置亮度为255) */
lv_led_off(led);       /* 关闭LED(设置亮度为0) */
lv_led_toggle(led);    /* 翻转LED状态 */
Tips：打开、关闭LED时，亮度不绝对是255、0，具体要看相关的宏定义（可修改）。

2.3 实验小演示(心跳灯)

lv_obj_t *led;

static void timer_cb(lv_timer_t *timer)
{
    lv_led_toggle(led);    /* 翻转LED状态 */
}

void my_gui(void)
{
    led = lv_led_create(lv_scr_act());              /* 创建LED部件，默认是打开状态 */
    lv_obj_center(led);                             /* 居中环形加载器部件 */

    lv_led_set_color(led, lv_color_hex(0x04ff50));  /* 设置LED颜色，绿色 */
    lv_led_set_brightness(led, 255);                /* 设置LED亮度，范围0~255 */

    lv_timer_create(timer_cb, 500, NULL);           /* 初始化定时器 */
}

演示视频：LED心跳灯

三、LVGL 列表部件

列表部件常用于多选一的场景，默认会展现多个选项。

效果图：

3.1 列表部件组成部分

主体（LV_PART_MAIN）
滚动条（LV_PART_SCROLLBAR）

3.2 列表部件基本API

创建列表部件：

lv_obj_t *list = lv_list_create(parent);

添加文本列表：

lv_list_add_text(list, "Settings");

添加列表按钮：

lv_obj_t *btn = lv_list_add_btn(list, LV_SYMBOL_WIFI,"WLAN");

获取列表按钮文本：

lv_list_get_btn_text(list, list_btn);

3.3 实验小演示

创建文件列表、连接列表和离开列表。

lv_obj_t *list;

static void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_CLICKED)
    {
        LV_UNUSED(obj);
        printf("Clicked: %s\n", lv_list_get_button_text(list, obj));
    }
}

void my_gui(void)
{
    list = lv_list_create(lv_scr_act());                  /* 创建列表 */

    lv_obj_t *btn;

    /******************************文件列表*****************************/
    lv_list_add_text(list, "File");                                 /* 创建列表文本 */

    btn = lv_list_add_btn(list, LV_SYMBOL_FILE, "NEW");             /* 创建列表按钮：文件 */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */

    btn = lv_list_add_btn(list, LV_SYMBOL_DIRECTORY, "Open");       /* 创建列表按钮：打开 */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */

    btn = lv_list_add_btn(list, LV_SYMBOL_SAVE, "Save");            /* 创建列表按钮：保存 */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */

    btn = lv_list_add_btn(list, LV_SYMBOL_CLOSE, "Delete");         /* 创建列表按钮：删除 */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */

    btn = lv_list_add_btn(list, LV_SYMBOL_EDIT, "Edit");            /* 创建列表按钮：离开 */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */

    /******************************连接列表*****************************/
    lv_list_add_text(list, "Connectivity");                         /* 创建列表文本 */

    btn = lv_list_add_btn(list, LV_SYMBOL_BLUETOOTH, "Bluetooth");  /* 创建列表按钮：蓝牙 */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */

    btn = lv_list_add_btn(list, LV_SYMBOL_GPS, "Navigation");       /* 创建列表按钮：GPS */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */

    btn = lv_list_add_btn(list, LV_SYMBOL_USB, "USB");              /* 创建列表按钮：USB */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */

    btn = lv_list_add_btn(list, LV_SYMBOL_BATTERY_FULL, "Battery"); /* 创建列表按钮：电池 */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */

    /******************************离开列表*****************************/
    lv_list_add_text(list, "Exit");                                 /* 创建列表文本 */

    btn = lv_list_add_btn(list, LV_SYMBOL_OK, "Apply");             /* 创建列表按钮：OK */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */

    btn = lv_list_add_btn(list, LV_SYMBOL_CLOSE, "Close");          /* 创建列表按钮：关闭 */
    lv_obj_add_event_cb(btn, event_cb, LV_EVENT_CLICKED, NULL);     /* 添加点击事件 */
}

演示视频：LVGL列表

四、LVGL 下拉列表部件

下拉列表部件常用于多选一的场景，点击后可展现多个选项。

效果图：

4.1 下拉列表部件组成部分

按钮（BUTTON）
列表（LIST）

4.2 下拉列表部件基本API

创建下拉列表部件：

lv_obj_t *dd = lv_dropdown_create(parent);

设置选项内容：

lv_dropdown_set_options(dd, "a\nb\nc\nd");            /* 设置选项 */
lv_dropdown_set_options_static(dd, "a\nb\nc\nd");     /* 设置选项(静态) */
lv_dropdown_add_option(dd, "e", 4);                   /* 添加选项，索引从0开始 */

设置当前所选项：

lv_dropdown_set_selected(dd, 1);    /* 索引从0开始 */

获取选项内容：

lv_dropdown_get_selected(dd);    /* 获取索引 */

char buf[10];
lv_dropdown_get_selected_str(dd, buf, sizeof(buf));    /* 获取选项文本 */

设置方向和图标：

lv_dropdown_set_dir(dd, LV_DIR_RIGHT);        /* 设置列表展开方向 */
lv_dropdown_set_symbol(dd, LV_SYMBOL_RIGHT);  /* 设置图标 */

4.3 实验小演示

创建四个下拉列表，分别向上、下、左、右四个方向展开列表。

lv_obj_t *dd1, *dd2, *dd3, *dd4;

static void event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);    /* 获取触发事件类型 */
    lv_obj_t *obj = lv_event_get_target(e);         /* 获取对象 */

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        char buf[10];
        lv_dropdown_get_selected_str(obj, buf, sizeof(buf));
        if(obj == dd1)
        {
            printf("The Up D-D List:%d %s\n", lv_dropdown_get_selected(obj), buf);
        }else if(obj == dd2)
        {
            printf("The Down D-D List:%d %s\n", lv_dropdown_get_selected(obj), buf);
        }else if(obj == dd3)
        {
            printf("The Left D-D List:%d %s\n", lv_dropdown_get_selected(obj), buf);
        }else
        {
            printf("The Right D-D List:%d %s\n", lv_dropdown_get_selected(obj), buf);
        }
    }
}

void my_gui(void)
{
    /***************************第一个下拉列表****************************/
    dd1 = lv_dropdown_create(lv_scr_act());                             /* 创建下拉列表 */

    lv_dropdown_set_options(dd1, "Apple\nBanana\nOrange\nMelon");       /* 设置选项 */
    lv_dropdown_set_selected(dd1, 0);                                   /* 索引从0开始 */
    lv_obj_align(dd1, LV_ALIGN_CENTER, 0, -100);
    lv_obj_add_event_cb(dd1, event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /* 添加改变事件 */

    /***************************第二个下拉列表****************************/
    dd2 = lv_dropdown_create(lv_scr_act());                             /* 创建下拉列表 */

    lv_dropdown_set_options(dd2, "Apple\nBanana\nOrange\nMelon");       /* 设置选项 */
    lv_dropdown_set_selected(dd2, 1);                                   /* 索引从1开始 */
    lv_obj_align(dd2, LV_ALIGN_CENTER, 0, 100);
    lv_obj_add_event_cb(dd2, event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /* 添加改变事件 */

    lv_dropdown_set_dir(dd2, LV_DIR_TOP);                               /* 设置列表展开方向 */
    lv_dropdown_set_symbol(dd2, LV_SYMBOL_UP);                          /* 设置图标 */

    /***************************第三个下拉列表****************************/
    dd3 = lv_dropdown_create(lv_scr_act());                             /* 创建下拉列表 */

    lv_dropdown_set_options(dd3, "Apple\nBanana\nOrange\nMelon");       /* 设置选项 */
    lv_dropdown_set_selected(dd3, 2);                                   /* 索引从2开始 */
    lv_obj_align(dd3, LV_ALIGN_CENTER, -200, 0);
    lv_obj_add_event_cb(dd3, event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /* 添加改变事件 */

    lv_dropdown_set_dir(dd3, LV_DIR_RIGHT);                             /* 设置列表展开方向 */
    lv_dropdown_set_symbol(dd3, LV_SYMBOL_RIGHT);                       /* 设置图标 */

    /***************************第四个下拉列表****************************/
    dd4 = lv_dropdown_create(lv_scr_act());                             /* 创建下拉列表 */

    lv_dropdown_set_options(dd4, "Apple\nBanana\nOrange\nMelon");       /* 设置选项 */
    lv_dropdown_set_selected(dd4, 3);                                   /* 索引从3开始 */
    lv_obj_align(dd4, LV_ALIGN_CENTER, 200, 0);
    lv_obj_add_event_cb(dd4, event_cb, LV_EVENT_VALUE_CHANGED, NULL);   /* 添加改变事件 */

    lv_dropdown_set_dir(dd4, LV_DIR_LEFT);                              /* 设置列表展开方向 */
    lv_dropdown_set_symbol(dd4, LV_SYMBOL_LEFT);                        /* 设置图标 */
}

演示图片：
演示视频：LVGL 向上、下、左、右展开列表

总结

在本篇中，我们可以学会环形加载器、LED、列表、下拉列表的基础应用，并配有小实验演示，再加上演示视频，可以更方便的去了解这些控件。小实验演示也在慢慢的加大难度，请勤多练手。