08. 按钮部件

一、按钮部件

  在 LVGL 中，当 按钮部件（lv_btn）被创建出来之后，其默认是一个圆角矩形，较为遗憾的是，按钮部件并不能直接设置文本。按钮部件仅有一个组成部分：主体背景。

  我们可以通过 lv_btn_create() 函数 创建按钮部件。

#define lv_btn_create        lv_button_create
lv_obj_t * lv_button_create(lv_obj_t * parent);

  在创建按钮部件之后，我们可以通过如下函数来设置按钮部件的样式。

void lv_obj_set_size(lv_obj_t * obj, int32_t w, int32_t h);                                         // 设置部件的大小
void lv_obj_set_align(lv_obj_t * obj, lv_align_t align);                                            // 设置部件的对齐方式
void lv_obj_set_style_bg_color(lv_obj_t * obj, lv_color_t value, lv_style_selector_t selector);     // 设置部件的背景色

  我们还可以通过如下函数为按钮部件添加事件。

// 开启状态切换
void lv_obj_add_flag(lv_obj_t * obj, lv_obj_flag_t f);

// 添加事件
lv_event_dsc_t * lv_obj_add_event_cb(lv_obj_t * obj, lv_event_cb_t event_cb, lv_event_code_t filter, void * user_data);

二、实验例程

#include "lvgl.h"
#include "lv_port_disp_template.h"
#include "lv_port_indev_template.h"

lv_obj_t *label;

int main(void)
{
    HAL_Init();
    System_Clock_Init(8, 336, 2, 7);
    Delay_Init(168);

    SPI_Simulate_Init();
    // SRAM_Init();
    TIM_Base_Init(&g_tim6_handle, TIM6, 83, 999);
    __HAL_TIM_CLEAR_IT(&g_tim6_handle, TIM_IT_UPDATE);                          // 清除更新中断标志位
    HAL_TIM_Base_Start_IT(&g_tim6_handle);                                      // 使能更新中断，并启动计数器

    lv_init();
    lv_port_disp_init();
    lv_port_indev_init();

    // 测试代码
    label = lv_label_create(lv_scr_act());                                      // 创建标签部件
    lv_obj_set_style_text_font(label, &lv_font_montserrat_30, LV_PART_MAIN);    // 设置标签部件的字体样式
    lv_obj_set_align(label, LV_ALIGN_TOP_MID);                                  // 设置标签部件靠上居中对齐
    lv_label_set_text(label, "button test");                                    // 设置标签部件的文本内容

    lv_obj_t *button =  lv_btn_create(lv_scr_act());                                // 创建按钮部件
    lv_obj_set_size(button, 100, 50);                                               // 设置按钮部件的大小
    lv_obj_set_align(button, LV_ALIGN_CENTER);                                      // 设置按钮部件居中对齐
    lv_obj_set_style_bg_color(button, lv_color_hex(0xBBFFAA), LV_STATE_PRESSED);    // 设置按钮部件按下时的背景颜色
    lv_obj_add_flag(button, LV_OBJ_FLAG_CHECKABLE);                                 // 开启按钮部件的状态切换

    lv_obj_add_event_cb(button, button_event_cb, LV_EVENT_ALL, NULL);               // 注册按钮部件的事件回调函数

    while (1)
    {
        lv_timer_handler();
        Delay_ms(5);
    }
  
    return 0;
}

void button_event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);                                // 获取事件的触发类型

    switch (code)
    {
    case LV_EVENT_PRESSED:
        lv_label_set_text(label, "button pressed");
        break;

    case LV_EVENT_RELEASED:
        lv_label_set_text(label, "button released");
  
    default:
        break;
    }
}