23. 图片按钮部件

一、图片按钮部件

  图片按钮部件和按钮部件是非常相似的，它只不过是在按钮部件的基础上增加了图片显示的功能。图片按钮部件只有一个组成部分：主体（LV_PART_MAIN）。图片按钮部件支持 C 语言数组或者外部存储器读取图片源，但它并不支持图标字体。

  LVGL 官方提供了一些与图片按钮部件相关 API。

lv_obj_t * lv_imagebutton_create(lv_obj_t * parent);                                        // 创建图片按钮部件
void lv_imagebutton_set_src(lv_obj_t * obj, lv_imagebutton_state_t state, const void * src_left, const void * src_mid, const void * src_right); // 设置图片源
void lv_imagebutton_set_state(lv_obj_t * obj, lv_imagebutton_state_t state);                // 设置图片按钮的状态
const void * lv_imagebutton_get_src_left(lv_obj_t * obj, lv_imagebutton_state_t state);     // 获取给定状态下的左侧图片
const void * lv_imagebutton_get_src_middle(lv_obj_t * obj, lv_imagebutton_state_t state);   // 获取给定状态下的中间图片
const void * lv_imagebutton_get_src_right(lv_obj_t * obj, lv_imagebutton_state_t state);    // 获取给定状态下的右侧图片

  我们可以使用 lv_imagebutton_create() 函数 创建图片按钮部件。

/**
 * @brief 创建图片按钮部件
 * 
 * @param parent 指向父部件的指针
 * @return lv_obj_t* 指向图片按钮部件的指针
 */
lv_obj_t * lv_imagebutton_create(lv_obj_t * parent);

  在创建完图片部件之后，我们需要使用 lv_imagebutton_set_src() 函数 设置图片源。

/**
 * @brief 设置图片源
 * 
 * @param obj 指向图片部件的指针
 * @param state 图片按钮部件的状态
 * @param src_left 指向按钮左侧的图片源的指针（C数组或文件路径）
 * @param src_mid 指向按钮中间的图片源的指针（C数组或文件路径）
 * @param src_right 指向按钮右侧的图片源的指针（C数组或文件路径）
 */
void lv_imagebutton_set_src(lv_obj_t * obj, lv_imagebutton_state_t state, const void * src_left, const void * src_mid, const void * src_right);

  其中，状态可以选择的值如下：

typedef enum {
    LV_IMAGEBUTTON_STATE_RELEASED,                      // 释放状态
    LV_IMAGEBUTTON_STATE_PRESSED,                       // 按下状态
    LV_IMAGEBUTTON_STATE_DISABLED,                      // 禁用状态
    LV_IMAGEBUTTON_STATE_CHECKED_RELEASED,              // 点击释放状态
    LV_IMAGEBUTTON_STATE_CHECKED_PRESSED,               // 点击按下状态
    LV_IMAGEBUTTON_STATE_CHECKED_DISABLED,              // 点击禁用状态
    _LV_IMAGEBUTTON_STATE_NUM,
} lv_imagebutton_state_t;

  在设置完图片源之后，我们还可以通过 lv_imgbtn_set_state() 函数手动 设置图片按钮部件的状态。

/**
 * @brief 设置图片按钮的状态
 * 
 * @param obj 指向图片按钮部件的指针
 * @param state 图片按钮部件的状态
 */
void lv_imagebutton_set_state(lv_obj_t * obj, lv_imagebutton_state_t state);

二、实验例程

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

#include "image_1.c"
#include "image_2.c"

int main(void)
{
    LV_IMG_DECLARE(image_1);
    LV_IMG_DECLARE(image_2);

    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();

    // 测试代码
    lv_obj_t *imageButton = lv_imagebutton_create(lv_scr_act());                // 创建图片按钮部件

    lv_obj_center(imageButton);                                                 // 图片按钮部件居中对齐
    lv_obj_set_size(imageButton, image_1.header.w, image_1.header.h);           // 设置图片按钮部件的尺寸

    lv_imagebutton_set_src(imageButton, LV_IMAGEBUTTON_STATE_RELEASED, NULL, &image_1, NULL);;      // 设置图片按钮部件释放时的图片源
    lv_imagebutton_set_src(imageButton, LV_IMAGEBUTTON_STATE_PRESSED, NULL, &image_2, NULL);;       // 设置图片按钮部件按下时的图片源

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