LVGL 控件之按钮（lv_button）

---

一、按钮

1、概述

按钮部件（lv_btn）仅有一个组成部分：主体背景，示意图如下：

与 Base object（见：LVGL 控件之基础对象（lv_obj）） 相比，按钮没有新功能。 它们可用于语义目的，并且默认设置略有不同。

默认情况下，按钮在以下方面与基础对象不同：

• 不可滚动
• 添加到默认组
• 默认高度和宽度设置为 LV_SIZE_CONTENT

button 对象通过 lv_btn_create 创建。

lv_obj_t * lv_btn_create(lv_obj_t * parent)

因此，这里不再过多叙述 button 的一些东西，这里主要讲一下样式的设置。

2、样式

2.1 设置背景

2.1.1 颜色

通过函数 lv_obj_set_style_bg_color 设置：

lv_obj_set_style_bg_color(btn1, lv_color_hex(0xafafaf), LV_PART_MAIN);

或者通过Style设置

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREY));
lv_obj_add_style(btn1, &style, LV_STATE_DEFAULT);

按键默认为蓝色，添加了样式后变成了灰色：

2.1.2 透明度

这里是改成了 20% 的透明度：

lv_obj_set_style_bg_opa(btn, LV_OPA_20, LV_PART_MAIN);

修改透明度只需要修改中间的 LV_OPA_XX 即可。

2.1.3 渐变色

背景可以使用渐变色的方式。用到了下面两个个 API 函数：

函数	含义
lv_obj_set_style_bg_grad_color	设置渐变色的颜色
lv_obj_set_style_bg_grad_dir	设置渐变方向

• 水平方向：LV_GRAD_DIR_HOR
• 垂直方向：LV_GRAD_DIR_VER

lv_obj_set_style_bg_grad_color(btn, lv_color_make(252, 144, 181), LV_PART_MAIN);
lv_obj_set_style_bg_grad_dir(btn, LV_GRAD_DIR_VER, LV_PART_MAIN);

颜色是从背景色过渡到设置的渐变色。

2.1.4 渐变色起始位置设置

函数	含义
lv_obj_set_style_bg_main_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)	设置开始位置
lv_obj_set_style_bg_grad_stop(struct _lv_obj_t * obj, lv_coord_t value, lv_style_selector_t selector)	设置结束位置

参数 value 表示起始位置（开始默认值是0，结束默认值为255）：

• 0：最左/最上位置，
• 255：最右/最下位置。

接上面的例子，将渐变色的开始位置改为中间。

lv_obj_set_style_bg_main_stop(btn, 127, LV_PART_MAIN);
lv_obj_set_style_bg_grad_stop(btn, 255, LV_PART_MAIN);

2.2 修改边界

2.2.1 宽度

边界的宽度一般默认是0，所以需要先设置宽度。

lv_obj_set_style_border_width(btn, 4, LV_PART_MAIN);

可以看到边界就是黑色那一圈。

2.2.2 颜色

lv_obj_set_style_border_color(btn, lv_color_make(246, 174, 49), LV_PART_MAIN);

2.2.3 透明度

默认是不透明。

lv_obj_set_style_border_opa(btn, LV_OPA_50, LV_PART_MAIN);

2.2.4 指定边

四个边通过 lv_obj_set_style_border_side 指定修改哪几个边，可以通过或的方式组合多个边

enum {
    LV_BORDER_SIDE_NONE     = 0x00,
    LV_BORDER_SIDE_BOTTOM   = 0x01,
    LV_BORDER_SIDE_TOP      = 0x02,
    LV_BORDER_SIDE_LEFT     = 0x04,
    LV_BORDER_SIDE_RIGHT    = 0x08,
    LV_BORDER_SIDE_FULL     = 0x0F,
    LV_BORDER_SIDE_INTERNAL = 0x10, /**< FOR matrix-like objects (e.g. Button matrix)*/
};

通过下面的函数可以单独针对按键的某些边进行设置：

lv_obj_set_style_border_side(btn, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT, LV_PART_MAIN);

2.3 修改边框

lv_obj_set_style_outline_pad(btn, 4, LV_PART_MAIN);
lv_obj_set_style_outline_width(btn, 4, LV_PART_MAIN);
lv_obj_set_style_outline_color(btn, lv_color_make(252, 144, 181), LV_PART_MAIN);

2.4 修改阴影

2.4.1 宽度

阴影的宽度默认是 0，改为 4 验证：

lv_obj_set_style_shadow_width(btn, 4, LV_PART_MAIN);

由于默认透明度是透明，所以只改这个参数无法看到效果。

2.4.2 透明度

阴影的透明度通过 lv_obj_set_style_shadow_opa 改变。

lv_obj_set_style_shadow_opa(btn, LV_OPA_80, LV_PART_MAIN);

此时也看不太明显。

2.4.3 偏移坐标

这里的偏移坐标是基于对象左顶点的偏移。

1. 改变 x 轴方向上的偏移：

lv_obj_set_style_shadow_ofs_x(btn, 10, LV_PART_MAIN);

这样看起来就非常明显了。

2. 改变 y 轴方向上的偏移：

lv_obj_set_style_shadow_ofs_y(btn, 10, LV_PART_MAIN);

2.4.4 颜色

lv_obj_set_style_shadow_ofs_x(btn, 10, LV_PART_MAIN);
lv_obj_set_style_shadow_ofs_y(btn, 10, LV_PART_MAIN);
lv_obj_set_style_shadow_color(btn, lv_color_make(252, 144, 181), LV_PART_MAIN);

2.4.5 延伸

设置在每个方向上的延伸值。

lv_obj_set_style_shadow_spread(btn, 4, LV_PART_MAIN);

2.5 设置圆角弧度

通过 lv_style_set_radius 设置圆角弧度。

lv_obj_set_style_radius(btn, LV_PCT(20), LV_PART_MAIN);

2.6 修改其他状态下的显示

需要通过 Style 修改其他状态下的显示。例如如果采用 Check Button，选中后的颜色是红色，改为灰色。

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREY));
lv_obj_add_style(btn1, &style, LV_STATE_CHECKED);

为了简化按钮的使用，可以使用 lv_btn_get_state(btn) 来获取按钮的状态。它返回以下值之一：

• LV_BTN_STATE_RELEASED 松开
• LV_BTN_STATE_PRESSED 被点击
• LV_BTN_STATE_CHECKED_RELEASED 点击后松开
• LV_BTN_STATE_CHECKED_PRESSED 重复点击
• LV_BTN_STATE_DISABLED 禁用
• LV_BTN_STATE_CHECKED_DISABLED 禁止点击

使用 lv_btn_set_state(btn, LV_BTN_STATE_...) 可以手动更改按钮状态。

static lv_style_t style;
lv_style_init(&style);
lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREY));
lv_obj_add_style(btn1, &style, LV_STATE_PRESSED);
lv_obj_add_style(btn2, &style, LV_STATE_FOCUSED);

二、例程

代码比较简单，主要是样式的设置和事件的添加，运行效果和源码见下：

lv_obj_t *btn_speed_up;
lv_obj_t *btn_speed_down;
lv_obj_t *btn_stop;
lv_font_t *font = &lv_font_montserrat_16;
lv_obj_t *label_speed;
uint32_t speed_val;

static void lv_example_label(void) {
    label_speed = lv_label_create(lv_scr_act());
    /* 创建速度显示标签 */
    lv_obj_set_style_text_font(label_speed, font, LV_PART_MAIN); /* 设置字体 */
    lv_label_set_text(label_speed, "Speed : 0 RPM"); /* 设置文本 */
    /* 设置标签位置 */
    lv_obj_align(label_speed, LV_ALIGN_TOP_MID, 0, 100);
}

static void btn_event_cb(lv_event_t * e) {
    lv_obj_t *target = lv_event_get_target(e); /* 获取触发源 */
    if(target == btn_speed_up) { /* 加速按钮 */
        speed_val += 30;
    } else if(target == btn_speed_down) { /* 减速按钮 */
        speed_val -= 30;
    } else if(target == btn_stop) { /* 急停按钮 */
        speed_val = 0;
    }

    lv_label_set_text_fmt(label_speed, "Speed : %d RPM", speed_val);  /* 更新速度值 */
}

static void lv_example_btn_up(void) {
    btn_speed_up = lv_btn_create(lv_scr_act());  /* 创建加速按钮 */
    lv_obj_set_size(btn_speed_up, 200, 100);     /* 设置按钮大小 */
    lv_obj_align(btn_speed_up, LV_ALIGN_CENTER, -250, 0);  /* 设置按钮位置 */
    lv_obj_add_event_cb(btn_speed_up, btn_event_cb, LV_EVENT_CLICKED, NULL);  /* 设置按钮事件 */

    lv_obj_t* label = lv_label_create(btn_speed_up);       /* 创建加速按钮标签 */
    lv_obj_set_style_text_font(label, font, LV_PART_MAIN); /* 设置字体 */
    lv_label_set_text(label, "Speed +");                   /* 设置标签文本 */
    lv_obj_set_align(label,LV_ALIGN_CENTER);               /* 设置标签位置 */
}

static void lv_example_btn_down(void) {
    btn_speed_down = lv_btn_create(lv_scr_act());  /* 创建加速按钮 */
    lv_obj_set_size(btn_speed_down, 200, 100);  /* 设置按钮大小 */
    lv_obj_align(btn_speed_down, LV_ALIGN_CENTER, 0, 0);  /* 设置按钮位置 */
    lv_obj_add_event_cb(btn_speed_down, btn_event_cb, LV_EVENT_CLICKED, NULL);  /* 设置按钮事件 */

    lv_obj_t* label = lv_label_create(btn_speed_down);      /* 创建减速按钮标签 */
    lv_obj_set_style_text_font(label, font, LV_PART_MAIN);  /* 设置字体 */
    lv_label_set_text(label, "Speed -");                    /* 设置标签文本 */
    lv_obj_set_align(label,LV_ALIGN_CENTER);                /* 设置标签位置 */
}

static void lv_example_btn_stop(void) {
    btn_stop = lv_btn_create(lv_scr_act());  /* 创建急停按钮 */
    lv_obj_set_size(btn_stop, 200, 100);     /* 设置按钮大小 */
    lv_obj_align(btn_stop, LV_ALIGN_CENTER, 250, 0);  /* 设置按钮位置 */

    lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xef5f60),  /* 设置按钮背景颜色（默认） */
                              LV_STATE_DEFAULT);

    lv_obj_set_style_bg_color(btn_stop, lv_color_hex(0xff0000),  /* 设置按钮背景颜色（按下） */
                              LV_STATE_PRESSED);

    lv_obj_add_event_cb(btn_stop, btn_event_cb, LV_EVENT_CLICKED, NULL);  /* 设置按钮事件 */

    lv_obj_t* label = lv_label_create(btn_stop);            /* 创建急停按钮标签 */
    lv_obj_set_style_text_font(label, font, LV_PART_MAIN);  /* 设置字体 */
    lv_label_set_text(label, "Stop");                       /* 设置标签文本 */
    lv_obj_set_align(label,LV_ALIGN_CENTER);                /* 设置标签位置 */
}

void my_gui(void) {
    lv_example_label();    /* 速度提示标签 */
    lv_example_btn_up();   /* 加速按钮 */
    lv_example_btn_down(); /* 减速按钮 */
    lv_example_btn_stop(); /* 急停按钮 */
}