LVGL滑动放大

1、运行效果

    

 2、功能描述

        滑动数组位于指定位置的数字放大，并改变颜色，同时右边的单位在x轴上左右位置进行动态调整

3、代码展示

     

// 1、添加浴缸事件回调函数创建滑动放大页面

lv_obj_add_event_cb(bathtub_label, bathtub_label_event_cb, LV_EVENT_CLICKED, NULL);       

//2、回调函数展开

static void bathtub_label_event_cb(lv_event_t *e)

{

// 添加按键声音

ui_tx_rd_with_buzz();

// 如果浴缸模式开关可以进入浴缸模式设置注水量

int bathtub_switch_state = lv_obj_has_state(bathtub_switch, LV_STATE_CHECKED);

if (bathtub_switch_state == 1)

{

set_functions.bathtub_switch_state == 1;

settings_save();

is_subpage_init = false;

// 创建注水量设置页面

lv_obj_t *scene_page_parent = lv_obj_get_parent(scene_page);

water_injection_page = lv_obj_create(scene_page_parent); // 注水量页面对象

// lv_obj_add_flag(scene_img, LV_OBJ_FLAG_HIDDEN); // 隐藏动画页面

lv_obj_remove_style_all(water_injection_page);

lv_obj_set_style_bg_opa(water_injection_page, LV_OPA_COVER, NONE); // 背景颜色改为黑色

lv_obj_set_style_bg_color(water_injection_page, lv_color_make(NONE, NONE, NONE), NONE); // 背景颜色改为黑色

lv_obj_set_size(water_injection_page, 480, 1280);

// 创建好浴缸模式注水量设置界面给系统发信号——15秒不退回主页面

if (water_injection_page != NULL)

{

set_return_flag(0); // 15秒不返回主页面

}

// 在左上角添加返回箭头

water_injection_page_return_switch = lv_img_create(water_injection_page);

lv_obj_align(water_injection_page_return_switch, LV_ALIGN_TOP_LEFT, 30, 30);

lv_img_set_src(water_injection_page_return_switch, scene_switch_src_array[2]); // 添加返回按钮图片

lv_obj_set_size(water_injection_page_return_switch, 33, 33);

lv_obj_set_style_img_opa(water_injection_page_return_switch, LV_OPA_COVER, 0); // 透明度

lv_obj_add_flag(water_injection_page_return_switch, LV_OBJ_FLAG_CLICKABLE);

lv_obj_set_ext_click_area(water_injection_page_return_switch, 100);

lv_obj_add_event_cb(water_injection_page_return_switch, water_injection_cancel_btn_event_cb, LV_EVENT_CLICKED, NULL); // 添加事件回调函数

// 页面标题“注水量”

water_injection_label = lv_label_create(water_injection_page);

lv_obj_remove_style_all(water_injection_label);

lv_obj_set_size(water_injection_label, 120, 40); // 大小

lv_obj_align(water_injection_label, LV_ALIGN_TOP_MID, NONE, 100);

lv_obj_set_style_text_align(water_injection_label, LV_ALIGN_CENTER, NONE); // 文字在标签中心

lv_obj_set_style_text_color(water_injection_label, lv_color_hex(0xffffff), LV_STATE_DEFAULT); // 字体颜色

lv_obj_set_style_text_font(water_injection_label, func_font_get(FONT_FAMILY_FZLTHK, FONT_SIZE_36), LV_PART_MAIN); // 使用自定义的字库

lv_label_set_text(water_injection_label, "注水量"); // 添加要显示的文字

// 在滑动容器上以级创建“升”字体标签

label_litre_word = lv_label_create(water_injection_page);

lv_obj_set_size(label_litre_word, 40, 40);

lv_label_set_text(label_litre_word, "升");

lv_obj_set_style_text_font(label_litre_word, func_font_get(FONT_FAMILY_FZLTHK, FONT_SIZE_36), LV_PART_MAIN); // 字体大小最初定为36

lv_obj_set_style_text_color(label_litre_word, lv_color_make(233, 189, 133), LV_PART_MAIN); // 字体颜色

lv_obj_add_flag(label_litre_word, LV_OBJ_FLAG_HIDDEN); // 首先进行隐藏

// 垂直滑动放大容器

water_injection_vertical_roller = lv_obj_create(water_injection_page); // 垂直滑动放大容器

lv_style_init(&roller_style); // 垂直滑动容器样式

lv_style_set_border_width(&roller_style, NONE);

lv_style_set_bg_opa(&roller_style, LV_OPA_TRANSP); // 等会再调透明度

lv_style_set_shadow_width(&roller_style, NONE);

lv_obj_add_style(water_injection_vertical_roller, &roller_style, LV_PART_MAIN);

lv_obj_align(water_injection_vertical_roller, LV_ALIGN_CENTER, NONE, -10);

lv_obj_set_size(water_injection_vertical_roller, 400, 650);

lv_obj_set_flex_flow(water_injection_vertical_roller, LV_FLEX_FLOW_COLUMN);

lv_obj_set_flex_align(water_injection_vertical_roller, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);

lv_obj_set_scroll_dir(water_injection_vertical_roller, LV_DIR_VER); // LV_DIR_TOP | LV_DIR_BOTTOM

lv_obj_set_scroll_snap_y(water_injection_vertical_roller, LV_SCROLL_SNAP_CENTER); // 设置在Y轴方向上滑动

lv_obj_set_style_pad_gap(water_injection_vertical_roller, 30, LV_PART_MAIN); // 调节滑动子对象间距离

lv_obj_set_scrollbar_mode(water_injection_vertical_roller, LV_SCROLLBAR_MODE_OFF); // 不显示滑动指示

lv_obj_add_event_cb(water_injection_vertical_roller, water_injection_vertical_roller_event_cb, LV_EVENT_SCROLL, NULL); // 垂直滑动放大处理函数

// 往滑动容器water_injection_vertical_roller中创建第一个对象滑动按钮对象

unsigned int i;

for (i = 50; i <= 310; i = i + 10)

{

// 创建滑动对象btn

vertical_roller_btn = lv_btn_create(water_injection_vertical_roller);

lv_obj_remove_style_all(vertical_roller_btn);

// 添加数值

vertical_roller_btn_label = lv_label_create(vertical_roller_btn);

lv_obj_remove_style_all(vertical_roller_btn_label);

lv_label_set_text_fmt(vertical_roller_btn_label, "%d", i); // 设置label文本

lv_obj_center(vertical_roller_btn_label); // label文字居中显示

}

lv_event_send(water_injection_vertical_roller, LV_EVENT_SCROLL, NULL);

lv_obj_update_snap(water_injection_vertical_roller, LV_ANIM_OFF);

lv_obj_t *child = lv_obj_get_child(water_injection_vertical_roller, (bathtub_set_litre - 50) / 10); // 得到初始值在滑动子对象中的位置

if (child == NULL)

{

child = lv_obj_get_child(water_injection_vertical_roller, 0);

}

if (child != NULL)

{

lv_obj_scroll_to_view(child, LV_ANIM_OFF); // 滑动放大初始值在中间200升位置

}

// 注水页面中取消按钮按钮

water_injection_cancel_btn = lv_btn_create(water_injection_page);

lv_obj_remove_style_all(water_injection_cancel_btn);

lv_obj_add_flag(water_injection_cancel_btn, LV_OBJ_FLAG_CHECKABLE);

lv_obj_set_style_outline_width(water_injection_cancel_btn, 2, LV_PART_MAIN);

lv_obj_set_style_outline_color(water_injection_cancel_btn, lv_color_hex(0x626262), LV_STATE_DEFAULT);

// lv_obj_set_style_outline_color(water_injection_cancel_btn, lv_color_make(0, 255, 0), LV_STATE_CHECKED);

lv_obj_set_style_text_color(water_injection_cancel_btn, lv_color_hex(0x626262), LV_STATE_DEFAULT);

// lv_obj_set_style_text_color(water_injection_cancel_btn, lv_color_hex(0xe9bd85), LV_STATE_CHECKED);

lv_obj_align(water_injection_cancel_btn, LV_ALIGN_BOTTOM_MID, -100, -100);

lv_obj_set_size(water_injection_cancel_btn, 170, 60);

lv_obj_set_ext_click_area(water_injection_cancel_btn, 100);

lv_obj_add_event_cb(water_injection_cancel_btn, water_injection_cancel_btn_event_cb, LV_EVENT_CLICKED, NULL); // 添加事件回调函数

water_injection_cancel_label = lv_label_create(water_injection_cancel_btn);

lv_obj_remove_style_all(water_injection_cancel_label);

lv_obj_center(water_injection_cancel_label);

lv_obj_set_style_text_font(water_injection_cancel_label, func_font_get(FONT_FAMILY_FZLTHK, FONT_SIZE_32), LV_PART_MAIN);

lv_label_set_text(water_injection_cancel_label, "取消");

// 注水页面中确定按钮

water_injection_confirm_btn = lv_btn_create(water_injection_page);

lv_obj_remove_style_all(water_injection_confirm_btn);

lv_obj_add_flag(water_injection_confirm_btn, LV_OBJ_FLAG_CHECKABLE);

lv_obj_set_style_outline_width(water_injection_confirm_btn, 2, LV_PART_MAIN);

lv_obj_set_style_outline_color(water_injection_confirm_btn, lv_color_hex(0xe9bd85), LV_STATE_DEFAULT);

// lv_obj_set_style_outline_color(water_injection_confirm_btn, lv_color_make(0, 255, 0), LV_STATE_CHECKED);

lv_obj_set_style_text_color(water_injection_confirm_btn, lv_color_hex(0xe9bd85), LV_STATE_DEFAULT);

// lv_obj_set_style_text_color(water_injection_confirm_btn, lv_color_hex(0xe9bd85), LV_STATE_CHECKED);

lv_obj_align(water_injection_confirm_btn, LV_ALIGN_BOTTOM_MID, 100, -100);

lv_obj_set_size(water_injection_confirm_btn, 170, 60);

lv_obj_set_ext_click_area(water_injection_confirm_btn, 100);

lv_obj_add_event_cb(water_injection_confirm_btn, water_injection_confirm_btn_event_cb, LV_EVENT_CLICKED, NULL); // 添加事件回调函数

water_injection_confirm_label = lv_label_create(water_injection_confirm_btn);

lv_obj_remove_style_all(water_injection_confirm_label);

lv_obj_center(water_injection_confirm_label);

lv_obj_set_style_text_font(water_injection_confirm_label, func_font_get(FONT_FAMILY_FZLTHK, FONT_SIZE_32), LV_PART_MAIN);

lv_label_set_text(water_injection_confirm_label, "确定");

is_subpage_init = true;

}

else // 如果浴缸模式开关没有打开，就不能进入浴缸模式注水量的设置页面

{

set_functions.bathtub_switch_state == 0;

settings_save();

return;

}

// 二级页面定时器_15s不操作自动退出页面

water_injection_page_return_time = lv_timer_create(water_injection_page_return_time_cb, 60, NULL);

}

3、滑动放大算法

/**make

* 垂直滑动处理函数

*/

static void water_injection_vertical_roller_event_cb(lv_event_t *e)

{

lv_obj_t *vertical_roller_cont = lv_event_get_target(e); // 获得被滚动的目标对象

uint16_t index_cont = lv_obj_get_index(vertical_roller_cont);

// LV_LOG_USER("index_cont=%d\n", index_cont);

lv_area_t vertical_roller_cont_a; // 表示屏幕的一个区域。

lv_obj_get_coords(vertical_roller_cont, &vertical_roller_cont_a); // 将一个对象的坐标复制到一个区域

lv_coord_t cont_y_center = vertical_roller_cont_a.y1 + lv_area_get_height(&vertical_roller_cont_a) / 2; // 获得屏幕区域的中心坐标

uint32_t i;

uint32_t child_cnt = lv_obj_get_child_cnt(vertical_roller_cont); // 获得滑动对象的btn的个数

for (i = 0; i < child_cnt; i++)

{

lv_obj_t *child = lv_obj_get_child(vertical_roller_cont, i); // 通过子对象的索引获取该对象的子对象。

// lv_obj_set_size(child, lv_pct(100), 100);

lv_area_t child_a;

lv_obj_get_coords(child, &child_a);

lv_coord_t child_y_center = child_a.y1 + lv_area_get_height(&child_a) / 2;

lv_coord_t diff_y = child_y_center - cont_y_center; // 在滚动中检测子对象相对与父对象在Y轴方向的距离

diff_y = LV_ABS(diff_y); // 计算距离差绝对值

if (diff_y < 50) // 垂直滑动距离

{

lv_obj_set_style_text_font(child, func_font_get(FONT_FAMILY_HIDCNL, FONT_SIZE_150), LV_PART_MAIN); // 滑到中间时，字体放大100-150

lv_obj_set_style_text_color(child, lv_color_make(233, 189, 133), LV_PART_MAIN); // 居中文字颜色为金黄色

// lv_obj_set_style_text_color(child, lv_palette_lighten(LV_PALETTE_YELLOW, 3), LV_PART_MAIN); // 居中文字颜色为深绿色

if (is_subpage_init) // 先判断注水量设置页面是否打开

{

lv_obj_t *big_btn = lv_obj_get_child(water_injection_vertical_roller, i); // 获得滑到中间位置的按钮

lv_obj_t *big_label = lv_obj_get_child(big_btn, NONE); // 获得中间按钮的上的标签

bathtub_set_litre = (uint32_t)atoi(lv_label_get_text(big_label)); // 获得滑到中间的按钮上显示的数字

LV_LOG_USER("浴缸模式注水量设置为%d", bathtub_set_litre); // 显示滑动到中间的数值

}

// 添加“升”字 ，并调整位置

lv_obj_clear_flag(label_litre_word, LV_OBJ_FLAG_HIDDEN); // 清除隐藏

lv_obj_align_to(label_litre_word, child, LV_ALIGN_OUT_RIGHT_MID, NONE, NONE); // “时”z坐标位置调整（右边紧贴）

lv_label_t *label_child = (lv_label_t *)lv_obj_get_child(child, NONE); // child=btn

const lv_font_t *font_main = lv_obj_get_style_text_font(label_litre_word, LV_PART_MAIN); // 获得标签上的文字

lv_coord_t font_main_h = lv_font_get_line_height(font_main); // 字体的高度

lv_obj_set_y(label_litre_word, cont_y_center - font_main_h / 2); // 同时调整y轴方向位置

}

else

{

lv_obj_add_flag(child, LV_OBJ_FLAG_CLICKABLE); // 使得居中每项的点击都可以选择中

lv_obj_set_style_text_font(child, func_font_get(FONT_FAMILY_HIDCNL, FONT_SIZE_100), LV_PART_MAIN); // 在两边字体100

lv_obj_set_style_text_color(child, lv_palette_lighten(LV_PALETTE_GREY, 1), LV_PART_MAIN); // 颜色变浅绿色

}

}

}

4、定时不操作界面，自动返回删除界面

/**make

* 10秒不操作自动退出页面计时器回调函数

*/

static void water_injection_page_return_time_cb(lv_timer_t *t)

{

uint32_t return_time = lv_disp_get_inactive_time(lv_disp_get_default());

if (return_time >= 10 * 1000)

{

// 退出页面

if (water_injection_page != NULL)

{

lv_obj_del(water_injection_page);

water_injection_page = NULL;

// 滑动放大初始化关闭

is_subpage_init = false;

// // 关闭定时器

// if (water_injection_page_return_time != 0)

// {

// lv_obj_del(water_injection_page_return_time);

// water_injection_page_return_time = NULL;

// }

}

}

}