27. 消息框部件

一、消息框部件

  消息框即消息弹窗，它可用于消息通知、内容提示、信息确认，等等。消息框部件可以设置为模态或非模态，当用户选择模态时，消息框弹出，仅有消息框的区域可点击，其他区域的点击无效。消息框部件是由多个小部件构建而成的，包括：主体、标题、关闭按钮、内容 和 按钮矩阵，示意图如下所示：

  LVGL 官方提供了一些与消息框部件相关 API。

lv_obj_t * lv_msgbox_create(lv_obj_t * parent);                                 // 创建消息框部件

lv_obj_t * lv_msgbox_add_title(lv_obj_t * obj, const char * title);             // 添加消息框标题文本
lv_obj_t * lv_msgbox_get_title(lv_obj_t * obj);                                 // 获取消息框标题文本对象

lv_obj_t * lv_msgbox_add_header_button(lv_obj_t * obj, const void * icon);      // 添加消息框头部按钮
lv_obj_t * lv_msgbox_get_header(lv_obj_t * obj);                                // 获取消息框头部对象

lv_obj_t * lv_msgbox_add_footer_button(lv_obj_t * obj, const char * text);      // 添加消息框底部按钮
lv_obj_t * lv_msgbox_get_footer(lv_obj_t * obj)                                 // 获取消息框底部对象

lv_obj_t * lv_msgbox_add_close_button(lv_obj_t * obj);                          // 添加消息框关闭按钮
lv_obj_t * lv_msgbox_add_text(lv_obj_t * obj, const char * text);               // 添加消息框文本

lv_obj_t * lv_msgbox_get_content(lv_obj_t * obj);                               // 获取消息框内容对象

void lv_msgbox_close(lv_obj_t * obj);                                           // 关闭消息框
void lv_msgbox_close_async(lv_obj_t * obj);                                     // 异步关闭消息框

  用户需要 创建消息框部件，可以调用 lv_msgbox_create() 函数。

/**
 * @brief 创建消息框部件
 * 
 * @param parent 指向父部件的指针
 * @return lv_obj_t* 指向消息框部件的指针
 */
lv_obj_t * lv_msgbox_create(lv_obj_t * parent);

  在创建完消息框部件之后，我们可以调用 lv_msgbox_add_title() 函数 添加消息框标题文本，lv_msgbox_add_text() 函数 添加消息框文本，lv_msgbox_add_close_button() 函数 添加消息框关闭按钮。

/**
 * @brief 添加消息框标题文本
 * 
 * @param obj 指向消息框部件的指针
 * @param title 标题文本
 * @return lv_obj_t* 执行标题的指针
 */
lv_obj_t * lv_msgbox_add_title(lv_obj_t * obj, const char * title);

/**
 * @brief 添加消息框文本
 * 
 * @param obj 指向消息框的指针
 * @param text 内容文本
 * @return lv_obj_t* 指向内容文本的指针
 */
lv_obj_t * lv_msgbox_add_text(lv_obj_t * obj, const char * text);

/**
 * @brief 添加消息框关闭按钮
 * 
 * @param obj 指向消息框的指针
 * @return lv_obj_t* 指向消息框关闭按钮的指针
 */
lv_obj_t * lv_msgbox_add_close_button(lv_obj_t * obj);

二、实验例程

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

lv_obj_t *messageBox;

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

    // 测试代码
    messageBox = lv_msgbox_create(lv_scr_act());                                // 创建消息框部件
    lv_obj_t *title =  lv_msgbox_add_title(messageBox, "Notice");               // 添加消息框标题的文本
    lv_obj_set_style_text_font(title, &lv_font_montserrat_30, LV_STATE_DEFAULT);// 设置标题字体样式

    lv_msgbox_add_close_button(messageBox);                                     // 添加消息框的关闭按钮

    lv_obj_t *content = lv_msgbox_get_content(messageBox);                      // 获取消息框主体
    lv_obj_set_style_pad_all(content, 20, LV_STATE_DEFAULT);                    // 设置四周的填充
   
    lv_obj_t *text = lv_msgbox_add_text(messageBox, "Do you want to continue"); // 添加消息框的内容文本
    lv_obj_set_style_text_font(text, &lv_font_montserrat_30, LV_STATE_DEFAULT); // 设置内容字体样式

    lv_msgbox_add_footer_button(messageBox, "Continue");                        // 添加消息框底部的按钮
    lv_obj_t *close_button = lv_msgbox_add_footer_button(messageBox, "Close");  // 添加消息框底部的按钮
  
    lv_obj_add_event_cb(close_button, messageBox_event_cb, LV_EVENT_CLICKED, NULL);

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

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

    if (code == LV_EVENT_CLICKED)
    {
        lv_msgbox_close(messageBox);
    }
}