Lvgl8 状态栏显示图标（增加/删除）

---

1.label显示图标

void demo_status_bar(void)
{
    lv_obj_t *window = lv_scr_act();

    lv_obj_t *status_bar = lv_label_create(window);
    lv_label_set_text(status_bar, LV_SYMBOL_WIFI LV_SYMBOL_FILE LV_SYMBOL_BATTERY_2); // 刷新显示图标
}

代码很简单
进入到 LV_SYMBOL_WIFI 的定义
发现他就是一个字符串

#define LV_SYMBOL_WIFI            "\xEF\x87\xAB" /*61931, 0xF1EB*/

由此可得，显示图标其实就是显示字符串，对字符串进行裁剪/拼接，就可以实现图标的显示/隐藏(删除)

2.例程

例程的注释写得很明白了，懒得分析了。。。

#include "../../lv_100ask_teach_demos.h"
#include "demo_status_bar.h"

#if 1 // 状态栏

#include <stdlib.h>
#include <unistd.h>
#include "lvgl/lvgl.h"
#include "lv_drivers/win32drv/win32drv.h"
#include <windows.h>

static lv_obj_t *status_bar = NULL;

struct status_bar_pos_t
{
    char pos[4]; // 一个图标其实占3个字节 + '\0'
};

// 图标数组（最多显示10个）
static struct status_bar_pos_t status_bar_pos[10] = {
    {.pos = '\0'},
    {.pos = '\0'},
    {.pos = '\0'},
    {.pos = '\0'},
    {.pos = '\0'},
    {.pos = '\0'},
    {.pos = LV_SYMBOL_USB},
    {.pos = LV_SYMBOL_SD_CARD},
    {.pos = LV_SYMBOL_NEW_LINE},
    {.pos = '\0'},
};

#define STATE_PROMPTS_SIZE(_state_prompts) (sizeof(_state_prompts) / sizeof(_state_prompts[0]))

static char status_bar_buf[STATE_PROMPTS_SIZE(status_bar_pos) * 4] = {0}; //

/**
 * @brief 向数组插入状态图标
 * @param {char} *prompts 传入需要显示的图标
 * @return {*}
 */
static void state_prompts_set_prompts(char *prompts)
{
    // 1.判断图标是否已经存在
    for (uint8_t i = 0; i < STATE_PROMPTS_SIZE(status_bar_pos); i++)
    {
        if (strcmp(status_bar_pos[i].pos, prompts) == 0)
        {
            printf("Icon already exists\n");
            return;
        }
    }
    // 2.在空的位置插入图标
    for (uint8_t i = 0; i < STATE_PROMPTS_SIZE(status_bar_pos); i++)
    {
        if (status_bar_pos[i].pos != '\0')
        {
            strcpy(status_bar_pos[i].pos, prompts);
            break;
        }
    }
    // 3.扫描数组，将非空的元素复制到 status_bar_buf 中，然后统一显示
    memset(status_bar_buf, 0, sizeof(status_bar_buf));
    for (uint8_t i = 0; i < STATE_PROMPTS_SIZE(status_bar_pos); i++)
    {
        if (status_bar_pos[i].pos != '\0')
        {
            strcat(status_bar_buf, status_bar_pos[i].pos);
        }
    }
    lv_label_set_text(status_bar, status_bar_buf); // 刷新显示图标
}

/**
 * @brief 从数组中删除图标
 * @param {char*} prompts 传入要删除的图标
 * @return {*}
 */
static void state_prompts_reset_prompts(char *prompts)
{
    // 1.判断图标是否已经存在
    for (uint8_t i = 0; i < STATE_PROMPTS_SIZE(status_bar_pos); i++)
    {
        if (strcmp(status_bar_pos[i].pos, prompts) == 0)
        {
            printf("Icon already exists\n");
            // 2.将图标清空
            memset(status_bar_pos[i].pos, 0, 4);
            break;
        }
    }
    // 3.扫描数组，将非空的元素复制到 status_bar_buf 中，然后统一显示
    memset(status_bar_buf, 0, sizeof(status_bar_buf));
    for (uint8_t i = 0; i < STATE_PROMPTS_SIZE(status_bar_pos); i++)
    {
        if (status_bar_pos[i].pos != '\0')
        {
            strcat(status_bar_buf, status_bar_pos[i].pos);
        }
    }
    lv_label_set_text(status_bar, status_bar_buf); // 刷新显示图标
}

static void btn_up_event(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    printf("up,%d\n", code);
    state_prompts_reset_prompts(LV_SYMBOL_WIFI); // 删除 wifi 图标
}

static void btn_down_event(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);
    printf("down,%d\n", code);
    state_prompts_set_prompts(LV_SYMBOL_WIFI); // 添加 wifi 图标
}

void demo_status_bar(void)
{
    lv_obj_t *window = lv_scr_act();
    LV_LOG_USER("LVGL initialization completed!");

    /**********************
     *  加载图片
     **********************/
    LV_IMG_DECLARE(ImgBg); // 背景图片

    /**********************
     *  构造控件
     **********************/
    lv_obj_t *btn_up = lv_btn_create(window);
    lv_obj_t *btn_down = lv_btn_create(window);
    lv_obj_t *up_label = lv_label_create(btn_up);
    lv_obj_t *down_label = lv_label_create(btn_down);
    lv_label_set_text(up_label, "up");
    lv_label_set_text(down_label, "down");

    lv_obj_t *background = lv_img_create(window);

    /**********************
     *  设置参数
     **********************/

    /*按键参数*/
    lv_obj_center(up_label); // 按键文本居中
    lv_obj_center(down_label);

    lv_obj_align(btn_up, LV_ALIGN_CENTER, 180, -50); // 按键位置
    lv_obj_align(btn_down, LV_ALIGN_CENTER, 180, 50);

    lv_obj_set_size(btn_up, 80, 40); // 按键大小
    lv_obj_set_size(btn_down, 80, 40);

    lv_obj_add_event_cb(btn_up, btn_up_event, LV_EVENT_CLICKED, background); // 注册按键回调函数
    lv_obj_add_event_cb(btn_down, btn_down_event, LV_EVENT_CLICKED, background);

    /* 滚动条 */
    lv_obj_set_scroll_snap_x(background, LV_SCROLL_SNAP_CENTER);  // 设置滚动方向：X
    lv_obj_set_scrollbar_mode(background, LV_SCROLLBAR_MODE_OFF); // 隐藏滚动条

    /* 设置背景 */
    static lv_style_t background_style;                     // 构造style对象
    lv_style_init(&background_style);                       // 初始化style
    lv_style_set_width(&background_style, 240);             // 设置宽度
    lv_style_set_height(&background_style, 240);            // 设置高度
    lv_style_set_align(&background_style, LV_ALIGN_CENTER); // 设置居中对齐
    lv_style_set_bg_img_src(&background_style, &ImgBg);     // 设置背景图片
    lv_obj_add_style(background, &background_style, 0);     // 将style绑定到menu

    /* 状态栏 */
    status_bar = lv_label_create(background);
    static lv_style_t style;
    lv_style_init(&style);                                             // 样式初始化
    lv_style_reset(&style);                                            // 重置样式
    lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_GREY)); // 设置样式文本颜色
    lv_style_set_text_letter_space(&style, 8);                         // 设置样式文本字符间隔
    lv_style_set_text_line_space(&style, 0);                           // 设置样式文本行间距
    // lv_style_set_text_decor(&style, LV_TEXT_DECOR_UNDERLINE);          // 设置样式文本带下划线
    lv_obj_add_style(status_bar, &style, 0);             // 绑定样式
    lv_obj_align(status_bar, LV_ALIGN_TOP_RIGHT, -8, 0); // 图标右上角对齐

    // 显示图标
    // 扫描数组，将非空的元素复制到 status_bar_buf 中，然后统一显示
    memset(status_bar_buf, 0, sizeof(status_bar_buf));
    for (uint8_t i = 0; i < STATE_PROMPTS_SIZE(status_bar_pos); i++)
    {
        if (status_bar_pos[i].pos != '\0')
        {
            strcat(status_bar_buf, status_bar_pos[i].pos); // 拼接字符串
        }
    }
    lv_label_set_text(status_bar, status_bar_buf); // 刷新显示图标
}

#endif

3.效果