LVGL部件篇：按钮部件(lv_btn)

爱学电子的刻刻帝

已于 2025-01-01 14:18:18 修改

阅读量1.2k

点赞数 22

分类专栏： LVGL 文章标签： LVGL

于 2024-12-31 10:45:38 首次发布

本文链接：https://blog.csdn.net/m0_74676415/article/details/144822177

版权

LVGL 专栏收录该内容

12 篇文章

订阅专栏

简介

在实际的 LVGL项目工程中，按钮部件的使用频率是非常高的，它常用于控制设备的启停。在 LVGL中，当按钮部件被创建出来之后，其默认是一个圆角矩形，较为遗憾的是，按钮部件并不能直接设置文本。

按钮部件的组成

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

关于部件样式设置的内容，请大家看我LVGL基础知识。

按钮部件的相关知识

按钮部件和基础对象非常类似，它们的绝大部分知识都是通用的，这里我们只介绍它们之间的区别：

① 默认情况下，按钮部件不可滚动。

② 默认情况下，按钮部件已经添加到默认组中。

③ 按钮部件的默认宽高为 LV_SIZE_CONTENT（自适应）。

按钮部件的 API 函数

函数名称	功能	主要参数	返回值
`lv_btn_create()`	创建一个按钮对象。	`parent`: 父对象指针； `copy`: 可选的按钮对象，用于复制属性。	新创建的按钮对象指针。
`lv_btn_set_checkable()`	设置按钮是否可切换（可选中或取消选中）。	`btn`: 按钮对象指针； `checkable`: `true` 或 `false`。	无返回值。
`lv_btn_toggle()`	切换按钮状态（选中或未选中）。	`btn`: 按钮对象指针。	无返回值。
`lv_btn_get_state()`	获取按钮当前的状态。	`btn`: 按钮对象指针。	返回按钮状态，类型为 `lv_btn_state_t`。
`lv_btn_set_state()`	设置按钮的状态。	`btn`: 按钮对象指针； `state`: 要设置的状态（`LV_BTN_STATE_REL`, `LV_BTN_STATE_PR`, 等）。	无返回值。
`lv_btn_get_checkable()`	检查按钮是否可切换状态。	`btn`: 按钮对象指针。	`true` 或 `false`。
`lv_btn_is_checked()`	检查按钮是否处于选中状态（仅适用于可切换的按钮）。	`btn`: 按钮对象指针。	`true` 或 `false`。
`lv_btn_set_layout()`	设置按钮的布局，用于管理子对象的位置。	`btn`: 按钮对象指针； `layout`: 布局类型（如 `LV_LAYOUT_CENTER`, `LV_LAYOUT_ROW`, 等）。	无返回值。
`lv_btn_set_fit()`	设置按钮的自适应模式，以适应内容或父对象。	`btn`: 按钮对象指针； `fit`: 自适应模式（如 `LV_FIT_TIGHT`, `LV_FIT_FLOOD`, 等）。	无返回值。
`lv_btn_add_event_cb()`	为按钮添加事件回调函数，用于处理用户交互。	`btn`: 按钮对象指针； `event_cb`: 事件回调函数指针； `user_data`: 用户数据。	无返回值。
`lv_btn_remove_event_cb()`	移除按钮的特定事件回调函数。	`btn`: 按钮对象指针； `event_cb`: 要移除的回调函数指针。	无返回值。

LVGL 按钮的状态枚举（lv_btn_state_t）

状态名称	描述
`LV_BTN_STATE_REL`	按钮处于未按下的常规状态。
`LV_BTN_STATE_PR`	按钮被按下。
`LV_BTN_STATE_TGL_REL`	切换按钮，处于未按下的选中状态。
`LV_BTN_STATE_TGL_PR`	切换按钮，处于按下的选中状态。
`LV_BTN_STATE_INA`	按钮处于不可用（禁用）状态。

使用示例：

lv_obj_t *btn = lv_btn_create(lv_scr_act());  // 创建一个按钮
lv_btn_set_checkable(btn, true);             // 设置按钮为可切换状态
lv_btn_set_state(btn, LV_BTN_STATE_REL);     // 设置按钮初始状态为未按下
lv_obj_add_event_cb(btn, my_event_cb, LV_EVENT_CLICKED, NULL);  // 添加点击事件回调

按钮部件的实验

本实验主要测试按钮部件 API 函数的使用，实验现象：开机后，屏幕上显示三个控制按钮和音量提示标签，用户可以通过不同的按钮去控制音量值。

static const lv_font_t* font;       /* 定义字体 */

static lv_obj_t *label_volume;       /* 音量提示文本 */
static lv_obj_t *btn_volume_up;      /* 加大按钮 */
static lv_obj_t *btn_volume_down;    /* 减小按钮 */
static lv_obj_t *btn_reset;          /* 复位按钮 */

static int32_t volume_val = 0;       /* 音量值 */

/* 获取当前活动屏幕的宽高 */
#define scr_act_width() lv_obj_get_width(lv_scr_act())
#define scr_act_height() lv_obj_get_height(lv_scr_act())


/**
 * @brief  按钮回调
 * @param  *e ：事件相关参数的集合，它包含了该事件的所有数据
 * @return 无
 */
static void btn_event_cb(lv_event_t * e)
{
    lv_obj_t *target = lv_event_get_target(e);      /* 获取触发源 */

    if(target == btn_volume_up)                      /* 加大按钮 */
    {
        volume_val += 30;
    }
    else if(target == btn_volume_down)               /* 减小按钮 */
    {
        volume_val -= 30;
    }
    else if(target == btn_reset)                     /* 复位按钮 */
    {
        volume_val = 0;
    }
    lv_label_set_text_fmt(label_volume, "Volume : %d %%", volume_val);    /* 更新音量值 */
}


/**
 * @brief  音量提示标签
 * @param  无
 * @return 无
 */
static void lv_example_label(void)
{
    /* 根据活动屏幕宽度选择字体 */
    if (scr_act_width() <= 320)
    {
        font = &lv_font_montserrat_10;
    }
    else if (scr_act_width() <= 480)
    {
        font = &lv_font_montserrat_14;
    }
    else
    {
        font = &lv_font_montserrat_20;
    }

    label_volume = lv_label_create(lv_scr_act());                                    /* 创建速度显示标签 */
    lv_obj_set_style_text_font(label_volume, font, LV_PART_MAIN);                    /* 设置字体 */
    lv_label_set_text(label_volume, "Volume : 0 %%");                                /* 设置文本 */
    lv_obj_align(label_volume, LV_ALIGN_CENTER, 0, -scr_act_height() / 3);           /* 设置标签位置 */
}
/**
 * @brief  加大按钮
 * @param  无
 * @return 无
 */
static void lv_example_btn_up(void)
{
    btn_volume_up = lv_btn_create(lv_scr_act());                                     /* 创建加速按钮 */
    lv_obj_set_size(btn_volume_up, scr_act_width() / 4, scr_act_height() / 6);       /* 设置按钮大小 */
    lv_obj_align(btn_volume_up, LV_ALIGN_CENTER, -scr_act_width() / 3, 0);           /* 设置按钮位置 */
    lv_obj_add_event_cb(btn_volume_up, btn_event_cb, LV_EVENT_CLICKED, NULL);        /* 设置按钮事件 */

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

/**
 * @brief  减小按钮
 * @param  无
 * @return 无
 */
static void lv_example_btn_down(void)
{
    btn_volume_down = lv_btn_create(lv_scr_act());                                   /* 创建加速按钮 */
    lv_obj_set_size(btn_volume_down, scr_act_width() / 4, scr_act_height() / 6);     /* 设置按钮大小 */
    lv_obj_align(btn_volume_down, LV_ALIGN_CENTER, 0, 0);                            /* 设置按钮位置 */
    lv_obj_add_event_cb(btn_volume_down, btn_event_cb, LV_EVENT_CLICKED, NULL);      /* 设置按钮事件 */

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

/**
 * @brief  复位按钮
 * @param  无
 * @return 无
 */
static void lv_example_btn_stop(void)
{
    btn_reset = lv_btn_create(lv_scr_act());                                         /* 创建复位按钮 */
    lv_obj_set_size(btn_reset, scr_act_width() / 4, scr_act_height() / 6);           /* 设置按钮大小 */
    lv_obj_align(btn_reset, LV_ALIGN_CENTER, scr_act_width() / 3, 0);                /* 设置按钮位置 */
    lv_obj_set_style_bg_color(btn_reset, lv_color_hex(0xef5f60), LV_STATE_DEFAULT);  /* 设置按钮背景颜色（默认） */
    lv_obj_set_style_bg_color(btn_reset, lv_color_hex(0xff0000), LV_STATE_PRESSED);  /* 设置按钮背景颜色（按下） */
    lv_obj_add_event_cb(btn_reset, btn_event_cb, LV_EVENT_CLICKED, NULL);            /* 设置按钮事件 */

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

/**
 * @brief  LVGL演示
 * @param  无
 * @return 无
 */
void lv_mainstart(void)
{
    lv_example_label();             /* 音量提示标签 */
    lv_example_btn_up();            /* 加大按钮 */
    lv_example_btn_down();          /* 减小按钮 */
    lv_example_btn_stop();          /* 复位按钮 */
}

上述源码可分为以下三个部分：

① lv_mainstart 接口函数。在该函数中，我们调用了标签和按钮示例函数；

② 音量标签实现。我们先根据活动屏幕的宽度来选择字体大小，然后创建音量显示标签，并设置相应的文本内容。

③ 加减音量、复位按钮函数实现。我们分别创建了加大、减小和复位按钮，并为它们设置了不同的样式，当某个按钮被按下时，会触发事件回调，在事件回调函数中，再根据触发源来更新当前音量值。

用CodeBlocks运行试一下: