12. 滚轮部件

一、滚轮部件

  滚轮部件常用于多选一的场景,它以 滚轮 的形式来展开多个选项。滚轮部件由两个部分组成:① 主体背景LV_PART_MAIN)和 ② 所选文本LV_PART_SELECTED),示意图如下:

滚轮部件的组成部分

  LVGL 官方提供了一些与滚轮部件相关 API。

lv_obj_t * lv_roller_create(lv_obj_t * parent);                                 // 创建滚轮部件

void lv_roller_set_options(lv_obj_t * obj, const char * options, lv_roller_mode_t mode);    // 设置滚轮部件选项
const char * lv_roller_get_options(const lv_obj_t * obj);                                   // 获取滚轮的选项

void lv_roller_set_selected(lv_obj_t * obj, uint32_t sel_opt, lv_anim_enable_t anim);       // 设置所选选项
uint32_t lv_roller_get_selected(const lv_obj_t * obj);                                      // 获取所选选项索引
void lv_roller_get_selected_str(const lv_obj_t * obj, char * buf, uint32_t buf_size);       // 获取所选选项文本

void lv_roller_set_visible_row_count(lv_obj_t * obj, uint32_t row_cnt);         // 设置可见选项数量

#define lv_roller_get_option_cnt            lv_roller_get_option_count
uint32_t lv_roller_get_option_count(const lv_obj_t * obj);                      // 获取选项的总数

  我们可以通过 lv_roller_create() 函数 创建滚轮部件

/**
 * @brief 创建滚轮部件
 * 
 * @param parent 指向父部件的指针
 * @return lv_obj_t* 指向滚轮部件的指针
 */
lv_obj_t * lv_roller_create(lv_obj_t * parent);

  默认情况下,滚轮部件创建出来后,其并不具备任何选项,用户需要 添加选项,可调用 lv_roller_set_options() 函数。

/**
 * @brief 设置滚轮部件选项
 * 
 * @param obj 指向滚轮的指针
 * @param options 添加的选项
 * @param mode 滚轮滚动的模式
 */
void lv_roller_set_options(lv_obj_t * obj, const char * options, lv_roller_mode_t mode);

  滚轮部件具有两种滚动模式,如下所示:

enum _lv_roller_mode_t {
    LV_ROLLER_MODE_NORMAL,          // 正常模式
    LV_ROLLER_MODE_INFINITE,        // 循环滚动模式
};

  如果滚轮部件为 LV_ROLLER_MODE_INFINITE 模式,此时,用户滚动选项,当选项滚动到最后一个,若继续滚动,其将回到第一个选项(循环滚动);如果滚轮部件为 LV_ROLLER_MODE_NORMAL 模式,则滚轮部件的最后一个和第一个选项不能循环切换,这两种模式的示意图如下:

滚轮部件模式示意图

  我们可以使用 lv_roller_set_visible_row_count() 函数 设置可见选项数量

/**
 * @brief 设置可见选项数量
 * 
 * @param obj 指向滚轮部件的指针
 * @param row_cnt 可见选项数量
 */
void lv_roller_set_visible_row_count(lv_obj_t * obj, uint32_t row_cnt);

  默认情况下,滚轮部件的所选项为第一个添加的选项,如果用户想 改变所选项,可调用 lv_roller_set_selected() 函数进行设置。

/**
 * @brief 设置所选选项
 * 
 * @param obj 指向滚轮部件的指针
 * @param sel_opt 所选项的索引
 * @param anim LV_ANIM_ON: 开启动画; LV_ANOM_OFF: 无动画
 */
void lv_roller_set_selected(lv_obj_t * obj, uint32_t sel_opt, lv_anim_enable_t anim);

  如果,我们要 获取所选选项的索引,可以通过 lv_roller_get_selected() 函数获取。

/**
 * @brief 获取所选选项索引
 * 
 * @param obj 指向滚轮部件的指针
 * @return uint32_t 选中项的索引
 */
uint32_t lv_roller_get_selected(const lv_obj_t * obj);

  如果,我们要获取选中项的文本,可以通过 lv_roller_get_selected_str() 函数获取。

/**
 * @brief 获取所选选项文本
 * 
 * @param obj 指向滚轮部件的指针
 * @param buf 存放选项文本的缓冲区
 * @param buf_size 缓冲区的大小
 */
void lv_roller_get_selected_str(const lv_obj_t * obj, char * buf, uint32_t buf_size);

二、实验例程

#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_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, "roller test");                                    // 设置标签部件的文本

    lv_obj_t *roller = lv_roller_create(lv_scr_act());                          // 创建滚轮部件
    lv_obj_center(roller);                                                      // 滚轮部件居中显示
    lv_obj_set_style_text_line_space(roller, 30, LV_STATE_DEFAULT);             // 设置滚轮部件行间距

    lv_roller_set_options(roller, "Sakura\nMikoto\nShana\nRimuru", LV_ROLLER_MODE_NORMAL);  // 设置滚轮部件的选项
    lv_roller_set_visible_row_count(roller, 3);                                 // 设置滚轮部件可见行数
    lv_roller_set_selected(roller, 2, LV_ANIM_ON);                              // 设置滚轮部件当前选中项

    lv_obj_add_event_cb(roller, roller_event_cb, LV_EVENT_VALUE_CHANGED, NULL); // 添加滚轮部件的事件回调函数
  
    while (1)
    {
        lv_timer_handler();
        Delay_ms(5);
    }
  
    return 0;
}
void roller_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);                                  // 获取事件的触发源
    uint32_t index = 0;
    char str[32] = {0};

    if(code == LV_EVENT_VALUE_CHANGED)
    {
        index = lv_roller_get_selected(target);
        lv_roller_get_selected_str(target, str, sizeof(str));
        lv_label_set_text_fmt(label, "selected %s, index %ld", str, index);
    }
}
posted @ 2024-06-09 20:38  星光映梦  阅读(27)  评论(0编辑  收藏  举报