26. 窗口部件

一、窗口部件

  窗口部件可以作为一个容器，展现不同功能的页面。窗口部件就是一个灵活的页面，它常用于任务的前后台切换、多任务协同处理等场景。窗口部件是由四个小部件组成，示意图如下所示：

  LVGL 官方提供了一些与窗口部件相关 API。

lv_obj_t * lv_win_create(lv_obj_t * parent);                                    // 创建窗口部件
lv_obj_t * lv_win_add_title(lv_obj_t * win, const char * txt);                  // 添加标题
lv_obj_t * lv_win_add_button(lv_obj_t * win, const void * icon, int32_t btn_w); // 添加按钮
lv_obj_t * lv_win_get_header(lv_obj_t * win);                                   // 获取头部区域
lv_obj_t * lv_win_get_content(lv_obj_t * win);                                  // 获取内容区域

  用户可以调用 lv_win_create() 函数来 创建窗口。

/**
 * @brief 创建窗口部件
 * 
 * @param parent 指向父部件的指针
 * @return lv_obj_t* 指向窗口部件的指针
 */
lv_obj_t * lv_win_create(lv_obj_t * parent);

  用户可调用 lv_win_add_title() 函数来 添加标题，该函数设置的文本会添加到头部区域中。

/**
 * @brief 添加标题
 * 
 * @param win 指向窗口部件的指针
 * @param txt 标题文本
 * @return lv_obj_t* 指向标题的指
 */
lv_obj_t * lv_win_add_title(lv_obj_t * win, const char * txt);

  用户还可以调用 lv_win_add_button() 函数来 添加按钮。

/**
 * @brief 添加按钮
 * 
 * @param win 指向窗口部件的指针
 * @param icon 图像源
 * @param btn_w 按钮的宽度
 * @return lv_obj_t* 指向按钮的指针
 */
lv_obj_t * lv_win_add_button(lv_obj_t * win, const void * icon, int32_t btn_w);

  窗口主要分为两个区域：头部 和 内容，这两部分的获取函数分别为 lv_win_get_header()、lv_win_get_content()。

/**
 * @brief 获取头部区域
 * 
 * @param win 指向窗口部件的指针
 * @return lv_obj_t* 指向头部区域的指针
 */
lv_obj_t * lv_win_get_header(lv_obj_t * win);

/**
 * @brief 获取内容区域
 * 
 * @param win 指向窗口部件的指针
 * @return lv_obj_t* 指向内容区域的指针
 */
lv_obj_t * lv_win_get_content(lv_obj_t * win);

二、实验例程

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

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

    // 测试代码
    lv_obj_t *window = lv_win_create(lv_scr_act());                                     // 创建窗口部件
  
    lv_obj_center(window);                                                              // 窗口部件居中对齐
    lv_obj_set_style_border_side(window, 1, LV_STATE_DEFAULT);                          // 设置边框宽度
    lv_obj_set_style_border_color(window, lv_color_hex(0x00BFFF), LV_STATE_DEFAULT);    // 设置边框颜色
    lv_obj_set_style_border_opa(window, 100, LV_STATE_DEFAULT);                         // 设置边框透明度
    lv_obj_set_style_radius(window, 10, LV_STATE_DEFAULT);                              // 设置边框圆角

    lv_obj_t *title = lv_win_add_title(window, "Setting");                              // 窗口部件添加标题
    lv_obj_set_style_text_font(title, &lv_font_montserrat_30, LV_STATE_DEFAULT);        // 设置标题的大小

    lv_obj_t *button = lv_win_add_button(window, LV_SYMBOL_CLOSE, 30);                  // 窗口部件添加按钮
    lv_obj_set_style_bg_opa(button, 0, LV_STATE_DEFAULT);                               // 设置按钮背景透明
    lv_obj_set_style_shadow_width(button, 0, LV_STATE_DEFAULT);                         // 取消按钮的阴影
    lv_obj_set_style_text_color(button, lv_color_hex(0x000000), LV_STATE_DEFAULT);      // 设置按钮的颜色
    lv_obj_set_style_text_color(button, lv_color_hex(0xFF0000), LV_STATE_PRESSED);      // 设置按钮按下时的颜色

    lv_obj_t *content = lv_win_get_content(window);                                     // 获取窗口部件的主体
    lv_obj_t *label = lv_label_create(content);
    lv_obj_center(label);
    lv_obj_set_style_text_font(label, &lv_font_montserrat_30, LV_STATE_DEFAULT);
    lv_label_set_text(label, "Setting");

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