ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

136_BEKEN LVGL UI Designer 教程_事件类型翻译与详解

136_BEKEN LVGL UI Designer 教程_事件类型翻译与详解 一、事件系统1. 系统概述事件系统用于为组件添加交互功能实现用户与界面的交互行为。当用户与组件交互时如点击、长按等触发相应的动作如页面跳转、修改属性等。事件系统工作流程如下用户交互 → 触发事件 → 执行动作 → 界面响应示例用户点击按钮→\rightarrow→触发LV_EVENT_CLICKED事件→\rightarrow→执行页面跳转动作→\rightarrow→跳转到目标页面。2. 访问事件编辑器事件编辑器位于属性面板的事件标签页中。(1)打开方式a. 选中要添加事件的组件。b. 在右侧属性面板中点击事件标签页。c. 即可看到事件编辑器界面。(2)操作步骤a. 点击添加事件按钮。b. 选择事件类型。c. 选择动作类型。d. 配置动作参数。e. 保存事件。3. 添加事件(1) 选择事件类型选择触发事件的条件常用事件类型包括a. 输入交互事件事件名称含义触发时机LV_EVENT_CLICKED组件被点击时触发最常用点击动作完整结束LV_EVENT_DOUBLE_CLICKED组件被双击时触发两次快速连续点击LV_EVENT_LONG_PRESSED组件被长按时触发按住达到设定时长LV_EVENT_PRESSED组件被按下时触发手指/鼠标按下瞬间LV_EVENT_RELEASED组件被释放时触发抬起手指/鼠标b. 焦点事件事件名称含义触发时机LV_EVENT_FOCUSED组件获得焦点时触发Tab 导航/点击进入LV_EVENT_DEFOCUSED组件失去焦点时触发焦点移出组件c. 值变化事件事件名称含义触发时机LV_EVENT_VALUE_CHANGED组件值改变时触发滑块移动、输入框输入d. 滚动事件事件名称含义触发时机LV_EVENT_SCROLL组件滚动时触发每帧/每次位移触发(2) 选择动作类型选择事件触发后要执行的动作动作类型说明页面跳转跳转到指定页面修改属性修改组件的一个或多个属性值修改样式修改组件的一个或多个样式属性调用函数调用自定义函数自定义代码在事件回调中内联执行自定义代码(3) 配置动作参数根据选择的动作类型配置相应的参数。a. 页面跳转参数参数可选值说明目标页面下拉列表选择要跳转到的页面动画类型none/fade_in/fade_out/move_left/move_right/move_top/move_bottom/over_left/over_right/over_top/over_bottom/out_left/out_right/out_top/out_bottom页面切换动画效果动画时长默认300300300动画持续时间毫秒动画延迟默认000动画延迟时间毫秒动画类型详细说明动画类型效果none无动画fade_in/fade_out淡入 / 淡出move_left/move_right/move_top/move_bottom滑动效果over_left/over_right/over_top/over_bottom覆盖效果out_left/out_right/out_top/out_bottom移出效果b. 修改属性参数参数说明目标组件选择要修改的组件默认为当前组件可从下拉列表中选择页面中的其他组件属性列表点击添加属性按钮选择要修改的属性如Text、Width、Height等输入新的属性值可添加多个属性修改项c. 修改样式参数参数说明目标组件选择要修改的组件默认为当前组件样式部分选择要修改的样式部分如Main、Indicator、Scrollbar等样式状态选择要修改的样式状态如Default、Pressed、Focused等样式属性列表点击添加样式属性按钮选择要修改的样式属性如背景颜色、字体大小、边框宽度等输入新的样式属性值可添加多个样式属性修改项d. 调用函数参数参数说明函数名输入要调用的函数名称如handleButtonClick在custom_func.c中实现该函数e. 自定义代码参数动作类型选择自定义代码时可配置配置项说明#include和变量写入对应页面.c文件顶部功能实现内联写入该事件的回调函数(4) 保存事件a. 可选添加事件描述用于说明事件用途便于后续维护。b. 点击确认按钮保存事件。c. 事件将出现在事件列表中。4. 编辑事件(1) 编辑现有事件a. 在事件列表中点击要编辑的事件。b. 修改事件类型、动作类型或参数。c. 点击确认按钮保存修改。(2) 删除事件删除事件有两种方式a. 方式 1从事件列表删除a. 在事件列表中点击事件右侧的删除按钮。b. 确认删除操作。b. 方式 2从编辑模式删除a. 点击事件进入编辑模式。b. 点击编辑表单头部的删除按钮。c. 确认删除操作。5. 事件列表事件列表显示当前组件的所有事件包括列名说明事件类型显示触发条件如CLICKED、LONG_PRESSED动作类型显示执行的动作如页面跳转、修改属性描述显示事件描述如果有操作按钮编辑、删除6. 事件连线可视化在画布中可以查看事件与目标组件之间的连线关系a. 在画布工具栏的视图菜单中选择显示事件连线。b. 画布中将显示事件与目标组件之间的连线。c. 点击连线可以快速定位到对应的事件配置。7. 相关功能功能说明属性面板事件编辑器位于属性面板中画布在画布中查看事件连线组件树管理组件层级关系多语言功能在事件动作中使用多语言自定义代码事件/页面自定义代码与 C 扩展8. 完整事件体系总表层级事件名称含义触发时机绑定动作点击层CLICKED通用点击完成点击动作完整结束修改样式点击层SHORT_CLICKED短点击500500500ms快速轻触后释放—点击层SINGLE_CLICKED单次点击单击完成—点击层DOUBLE_CLICKED双击两次快速连续点击—点击层TRIPLE_CLICKED三击三次快速连续点击—按压层PRESSED按下瞬间手指/鼠标按下—按压层PRESSING持续按压中按住不放持续触发修改样式/进度按压层PRESS_LOST按压中断手指滑出区域或被系统抢占—按压层RELEASED释放抬起手指/鼠标—长按层LONG_PRESSED长按判定成功按住达到设定时长如800800800ms—长按层LONG_PRESSED_REPEAT长按重复触发长按后持续连发如连击—取消层CANCEL取消操作弹窗打断/手势取消—键盘层KEY通用按键任意按键触发按键回显键盘层KEY_UP上方向键按下上箭头—键盘层KEY_DOWN下方向键按下下箭头—键盘层KEY_LEFT左方向键按下左箭头—键盘层KEY_RIGHT右方向键按下右箭头—键盘层KEY_ESCESC 键按下 ESC—键盘层KEY_DEL删除键按下 Delete/Backspace—键盘层KEY_END按键结束松开按键—焦点层FOCUSED获得焦点Tab 导航/点击进入边框高亮外发光焦点层DEFOCUSED失去焦点焦点移出移除高亮焦点层LEAVE鼠标/手指离开移出组件区域—手势层GESTURE_LEFT左滑手势手指向左滑动切换页面手势层GESTURE_RIGHT右滑手势手指向右滑动切换页面手势层GESTURE_TOP上滑手势手指向上滑动—手势层GESTURE_BOTTOM下滑手势手指向下滑动—旋转层POTARYROTARY旋转手势旋钮/双指旋转—滚动层SCROLL_BEGIN开始滚动触摸拖动起点—滚动层SCROLL滚动进行中每帧/每次位移触发更新滚动位置滚动层SCROLL_END结束滚动松手或惯性停止—值/状态层VALUE_CHANGED数值变化滑块/输入框数值改变更新显示值/状态层CHECKED选中开关/复选框打开—值/状态层UNCHECKED取消选中开关/复选框关闭—值/状态层INSERT插入内容输入文字/列表插入项—底层引擎HIT_TEST命中测试点击时检测是否落在该元素上—生命周期READY组件就绪初始化完成可交互—9. 动作绑定汇总表事件绑定动作CLICKED修改样式PRESSING修改样式 / 触发进度VALUE_CHANGED更新数据显示GESTURE_LEFT/GESTURE_RIGHT切换页面/视图SCROLL更新滚动位置FOCUSED边框高亮外发光DEFOCUSED移除高亮KEY按键回显 / 光标闪烁
返回列表