19. 列表部件

一、列表部件

  列表部件常用于多选一的场景，默认会展现多个选项。列表部件由两个部分组成：主体背景（LV_PART_MAIN）和 滚动条（LV_PART_SCROLLBAR）。

  LVGL 官方提供了一些与列表部件相关 API。

lv_obj_t * lv_list_create(lv_obj_t * parent);                                           // 创建列表部件

lv_obj_t * lv_list_add_text(lv_obj_t * list, const char * txt);                         // 添加列表文本

#define lv_list_add_btn      lv_list_add_button
lv_obj_t * lv_list_add_button(lv_obj_t * list, const void * icon, const char * txt);    // 添加列表按钮

#define lv_list_get_btn_text lv_list_get_button_text
const char * lv_list_get_button_text(lv_obj_t * list, lv_obj_t * btn);                  // 获取按下的按钮文本

  我们可以使用 lv_list_create() 函数 创建列表部件。

/**
 * @brief 创建列表部件
 * 
 * @param parent 指向父部件的指针
 * @return lv_obj_t* 指向列表部件的指针
 */
lv_obj_t * lv_list_create(lv_obj_t * parent);

  在创建列表部件之后，我们可以通过 lv_list_add_text() 函数 设置列表文本。

/**
 * @brief 添加列表文本
 * 
 * @param list 指向列表部件的指针
 * @param txt 设置的文本
 * @return lv_obj_t* 指向文本的指针
 */
lv_obj_t * lv_list_add_text(lv_obj_t * list, const char * txt);

  我们还可以通过 lv_list_add_btn() 函数 设置列表按钮。

/**
 * @brief 设置列表按钮
 * 
 * @param list 指向列表部件的指针
 * @param icon 图标
 * @param txt 设置的文本
 * @return lv_obj_t* 指向按钮的指针
 */
lv_obj_t * lv_list_add_btn(lv_obj_t * list, const void * icon, const char * txt);

  如果我们要想 获取按下的按钮文本，可以通过 lv_list_get_btn_text() 函数。

/**
 * @brief 获取列表部件按下时的按钮文本
 * 
 * @param list 指向列表部件的指针
 * @param btn 图标
 * @return const char* 指向文本的指针
 */
const char * lv_list_get_btn_text(lv_obj_t * list, lv_obj_t * btn);

二、实验例程

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

lv_obj_t *label;
lv_obj_t *list;

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_align(label, LV_ALIGN_TOP_MID);                                  // 设置标签部件考上居中对齐
    lv_obj_set_style_text_font(label, &lv_font_montserrat_30, LV_PART_MAIN);    // 设置标签部件的字体样式
    lv_label_set_text(label, "list test");                                      // 设置标签部件的文本

    list =  lv_list_create(lv_scr_act());                                       // 创建列表部件
    lv_obj_set_size(list, 240, 320);                                            // 设置列表部件的大小
    lv_obj_center(list);                                                        // 设置列表部件居中对齐

    lv_list_add_text(list, "Settings");                                         // 添加列表文本
    lv_obj_t *wifi_button = lv_list_add_btn(list, LV_SYMBOL_WIFI, "WIFI");      // 添加WIFI列表按钮
    lv_obj_t *blueTooth_button = lv_list_add_btn(list, LV_SYMBOL_BLUETOOTH, "BlueTooth");   // 添加BLUETOOTH列表按钮
    lv_obj_t *bell_button = lv_list_add_btn(list, LV_SYMBOL_BELL, "Bell");      // 添加列表按钮

    lv_obj_add_event_cb(wifi_button, list_button_event_cb, LV_EVENT_CLICKED, NULL);
    lv_obj_add_event_cb(blueTooth_button, list_button_event_cb, LV_EVENT_CLICKED, NULL);
    lv_obj_add_event_cb(bell_button, list_button_event_cb, LV_EVENT_CLICKED, NULL);

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

void list_button_event_cb(lv_event_t *e)
{
    lv_event_code_t code = lv_event_get_code(e);                                // 获取事件的触发类型
    lv_obj_t *target = lv_event_get_target(e);                                  // 获取事件的触发源
    char *txt;

    if (code == LV_EVENT_CLICKED)
    {
        txt = (char *)lv_list_get_btn_text(list, target);                       // 获取列表部件按下时的按钮文本
        lv_label_set_text_fmt(label, "click %s", txt);                          // 设置标签部件的文本
    }
}