style_include_selector

本文介绍了前端开发中样式复用的方法,包括使用style定义样式、通过include引入视图文件及利用selector管理不同状态下的素材展示,有助于提升开发效率并简化维护工作。

style

风格 样式  html  css

重用控件的属性

引用一个绑定可重用属性的名称 效果上相当于配置这些属性

提高开发效率

维护

include

引入标签

引入可重用的视图文件,效果上相当于 布局这些视图

selector

选择器

管理素材的对象,根据不同的状态显示不同图片

1.准备图片

2.理解条件 press=true  

select=true  view.setSelected(true)


void File_Btn_Task(lv_event_t * e) { DBI_P btn_inf = (DBI_P)e->user_data; struct Ui_Ctrl * UC_P = btn_inf->UC_P; // 找到当前文件在数组中的索引 int idx = 0; for (; idx < UC_P->dir_ui_p->img_cnt; ++idx) if (!strcmp(UC_P->dir_ui_p->img_path[idx], btn_inf->new_dir_name)) break; UC_P->dir_ui_p->img_idx = idx; // 若旧预览容器存在,先销毁(避免残留元素) if (UC_P->dir_ui_p->img_ui != NULL) { lv_obj_del(UC_P->dir_ui_p->img_ui); UC_P->dir_ui_p->img_ui = NULL; } // 创建预览容器 UC_P->dir_ui_p->img_ui = lv_obj_create(NULL); lv_obj_add_flag(UC_P->dir_ui_p->img_ui, LV_OBJ_FLAG_CLICKABLE); lv_obj_add_event_cb(UC_P->dir_ui_p->img_ui, img_gesture_cb, LV_EVENT_GESTURE, UC_P); // 设置容器占满屏幕,避免布局局限 lv_obj_set_size(UC_P->dir_ui_p->img_ui, lv_obj_get_width(lv_scr_act()), lv_obj_get_height(lv_scr_act())); // 获取当前触发事件的按钮对象 lv_obj_t *btn = lv_event_get_target(e); // 声明并初始化样式(解决style_pr未声明错误) static lv_style_t style_pr; // 用static避免重复初始化 lv_style_init(&style_pr); // 1. 按下时缩放效果(8.2版本通过此函数实现) lv_style_set_transform(btn, 0.95, LV_STATE_PRESSED); // 2. 按下时背景色变化(补充第三个状态参数) lv_obj_set_style_bg_color(btn, lv_color_hex(0xCCCCCC), LV_STATE_PRESSED); // 可选:恢复默认状态的背景色(如果需要) lv_obj_set_style_bg_color(btn, lv_color_hex(0xFFFFFF), LV_STATE_DEFAULT); // 将样式应用到按钮的按下状态 lv_obj_add_style(btn, &style_pr, LV_STATE_PRESSED); // 先显示图片 show_img_by_index(UC_P, idx); // 这里已包含关闭按钮的创建 // 加载预览容器 lv_scr_load(UC_P->dir_ui_p->img_ui); }更换成LVGL版本8.2
最新发布
09-02
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值