【LVGL】roller选项列表问题

在实际应用中，可能会使用roller控件实现时间选择功能，选项列表只有24小时的时候，界面显示是正常的。但当选项列表是60分钟的时候，由于列表过长，显示就会出现问题。如众多帖子描述，只需要在lv_conf.h中打开宏 LV_USE_LARGE_COORD 即可。

虽然解决了显示问题，却发现在roller控件创建的时候耗时严重，尤其是当程序运行在资源有限的嵌入式设备上，问题更加明显，进而导致页面打开卡顿，影响体验。

换一种思路，如果每次只设置5个选项给roller控件，在每次滚动时重新计算并设置选项列表……

#define OPTION_FMT       "%02d\n%02d\n%02d\n%02d\n%02d"    // 选项列表格式
#define MASTER_INDEX     2                                 // 列表为5项，中间项索引为2
#define OPTION_LEN       32                                // 列表字符串buffer长度/*** @brief 选项列表最大值最小值
*/
typedef struct {int min;int max;
} roller_range_t;/*** @brief 计算选项列表* @param val 当前选中的值* @param buf 选项列表字符串buffer* @param len 选项列表字符串buffer长度* @param min 控件选项列表最小值* @param max 控件选项列表最大值
*/
static void calc_roller_option( int val, char* buf, int len, int min, int max )
{int left1  = val - 1;int left2  = val - 2;int right1 = val + 1;int right2 = val + 2;int range = max - min + 1;if ( left1 < min ) {left1 += range;}if ( left2 < min ) {left2 += range;}if ( right1 > max ) {right1 -= range;}if ( right2 > max ) {right2 -= range;}snprintf( buf, len, OPTION_FMT, left2, left1, val, right1, right2 );return;
}/*** @brief roller控件事件回调函数* @param e
*/
static void roller_event_cb( lv_event_t* e )
{if ( LV_EVENT_VALUE_CHANGED == lv_event_get_code( e ) ) {lv_obj_t* obj = lv_event_get_target( e );roller_range_t* range = (roller_range_t*)(obj->user_data);char buf[OPTION_LEN] = "\0";int val = 0;lv_roller_get_selected_str( obj, buf, OPTION_LEN );val = atoi( buf );calc_roller_option( val, buf, OPTION_LEN, range->min, range->max );lv_roller_set_options( obj, buf, LV_ROLLER_MODE_NORMAL );    // 这里不需要设置无限模式，计算列表时已处理列表循环lv_roller_set_selected( obj, MASTER_INDEX, LV_ANIM_OFF );}return;
}/*** @brief 创建roller控件* @param parent 父窗体* @param def_val 默认值* @param min_val 最小值* @param max_val 最大值* @return 已创建的roller对象指针
*/
static lv_obj_t* create_roller( lv_obj_t* parent, int def_val, int min_val, int max_val )
{lv_obj_t* roller = lv_roller_create( parent );roller_range_t* range = (roller_range_t*)malloc( sizeof( roller_range_t ) );if ( NULL != range ) {range->min = min_val;range->max = max_val;}roller->user_data = (void*)range;char option[OPTION_LEN] = "\0";calc_roller_option( def_val, option, OPTION_LEN, min_val, max_val );lv_roller_set_options( roller, option, LV_ROLLER_MODE_NORMAL );lv_roller_set_selected( roller, MASTER_INDEX, LV_ANIM_OFF );lv_obj_add_event_cb( roller, roller_event_cb, LV_EVENT_VALUE_CHANGED, NULL );return roller;
}/*** @brief 设置roller当前值* @param roller 控件对象* @param val 当前值
*/
static void set_roller_cur_val( lv_obj_t* roller, int val )
{roller_range_t* range = (roller_range_t*)(roller->user_data);char buf[OPTION_LEN] = "\0";calc_roller_option( val, buf, OPTION_LEN, range->min, range->max );lv_roller_set_options( roller, buf, LV_ROLLER_MODE_NORMAL );lv_roller_set_selected( roller, MASTER_INDEX, LV_ANIM_OFF );
}void main( void )
{lv_obj_t* roller1 = create_roller( lv_scr_act(), 0, 0, 59 );lv_roller_set_visible_row_count( roller1, 3 );lv_obj_center( roller1 );set_roller_cur_val( roller1, 24 );return;
}

轻松实现超长选项列表的roller控件，不仅分散了创建roller时设置option的耗时，避免页面创建时卡顿，同时也可以不需要 LV_USE_LARGE_COORD 的支持。

【LVGL】roller选项列表问题相关推荐

lvgl roller(滑动列表控件)
源代码: static void roller_event_handler(lv_obj_t * obj, lv_event_t event) {if (event == LV_EVENT_VALUE ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法二）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法一）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
记——通过点击表头弹出筛选选项列表，点击进行数据筛选
要求 a.点击表头弹出列表 b.点击筛选内容进行数据筛选 c.允许多条件 d.当点击筛选选项列表之外的区域时,列表收起 e.筛选选项列表宽度与列宽度保持一致 f.筛选选项列表需要有横向滚动条实现 a ...
php curl选项列表(超详细)
第一类:对于下面的这些option的可选参数,value应该被设置一个bool类型的值: 选项可选value值备注 CURLOPT_AUTOREFERER当根据Location:重定向时,自动设置 ...
python如何画出多个独立的图使用turtle_从选项列表一次绘制多个形状（Python-Turtle图形）？...
因此,首先,要求如下:用户从6个形状列表中选择3个形状用户选择尺寸.填充颜色和线条颜色用户不能选择同一形状两次形状应均匀分布,每个形状占屏幕的1/3 以下是我目前为止的代码:import tur ...
GUI怎么能缺少列表， LVGL『List列表控件』介绍
一. LVGL GUI列表控件的概念列表是从背景页面和其上的按钮构建的.按钮包含一个可选的类似图标的图像(也可以是一个符号)和一个 Label.当列表足够长时,可以滚动它. 二. LVGL GUI列 ...
node.js运行js_Node.js运行时v8选项列表
node.js运行js Node.js can be invoked with an incredibly various set of options. 可以使用各种不同的选项来调用Node.js. ...
LVGL 源码分析大全
LVGL 源码分析大全目录 1.概述 2.已完成源码分析文章列表 2.1.硬件抽像层(hal) 2.2.核心框架(core/misc) 2.3.定制功能 2.4.内部接口 2.5.案例讲解 2.6.其 ...
html 多项选择,选项标签中的HTML多字段选择
这可以通过switch语句实现,但这不是最好的方法.我建议将以下函数作为change事件的事件处理程序.您还需要在窗口加载时运行它,以初始化它. function updateSel() { var ...

【LVGL】roller选项列表问题

【LVGL】roller选项列表问题相关推荐

最新文章

热门文章