使用事件编辑器

什么是事件编辑器？

事件编辑器可以将控件连接起来，让一个控件上的操作影响另一个控件或整个屏幕。每个事件由三部分组成：

• 事件源（Source）：用户操作的控件，例如按钮。
• 触发条件（Trigger）：什么操作会触发事件，例如点击。
• 动作（Action）：触发后要执行什么，例如切换屏幕。动作通常还需要指定一个**目标（Destination）**控件或屏幕。

用一句话来说就是：“用户点击这个按钮时，切换到设置屏幕。”这就是一个事件。你可以按需添加事件，为整个界面设置交互。

打开事件编辑器

选择任意控件或屏幕，然后切换到右侧边栏的 Events 标签，它与 Design 和 Inspect 并列。每个事件都会显示为一张卡片，展开后即可配置。

尚未创建事件时，PicoPixel 会提示以下操作：

1. 点击 + 按钮添加事件。
2. 选择控件或屏幕，从它拖出一条连接线，连接到另一个控件或屏幕。
3. 点击顶部的播放按钮，运行事件视图并试用交互。

连接控件：从事件源拖到目标

直接在画布上操作，是创建事件最快的方式：

1. 选择作为事件源的控件，也就是用户要操作的对象。
2. 拖动控件边缘出现的小连接点，将连接线拖向要影响的控件或屏幕。
3. 在目标上松开。PicoPixel 会在两者之间画出一条曲线，线上带有一个小节点。
4. 点击节点选择触发条件，节点会显示当前条件，例如 “Clicked”。目标及其他选项可在 Events 面板中设置。

每条连接线都代表一个事件，控件之间的关系一目了然。

选择触发条件

触发条件决定事件何时执行。点击连接线上的节点，或 Events 面板中的 Trigger 下拉菜单，即可选择。最常用的是 Clicked，其他选项如下：

• Clicked：点击并松开，适合大多数按钮操作。
• Pressed：手指按下的瞬间。
• Released：手指松开时。
• Long Pressed / Long Pressed Repeat：长按，或长按期间重复触发。
• Gesture：滑动手势。
• Value Changed：控件的值发生变化，例如拖动滑块、切换开关或勾选复选框。适用于滑块、开关和滚轮选择器。
• Focused / Defocused：控件获得或失去焦点。
• Screen Loaded / Screen Unloaded：屏幕加载或卸载。可以用来在打开屏幕时执行初始化操作。
• Scroll Begin / Scroll End：开始或停止滚动。
• Ready / Cancel：适用于屏幕键盘等输入控件。

选择动作

动作决定事件触发后执行什么。可用选项包括：

• Change Screen：切换到另一个屏幕。可以选择淡入淡出（Fade）或向左、右、上、下滑动的过渡效果，并设置速度和延迟，用来构建多屏应用。
• Delete Screen：切换到另一个屏幕，同时释放原屏幕占用的内存，适合内存紧张的设备。
• Show Widget / Hide Widget：显示或隐藏控件，适合弹窗、面板和详情区域。
• Set State：添加、移除或切换控件状态，例如选中（checked）、禁用（disabled）、聚焦（focused）或按下（pressed）。
• Set Opacity：设置控件透明度，100 为完全可见，0 为完全透明。
• Set Properties：修改控件的位置或尺寸。
• Set Text：更新标签或按钮上的文字。
• Set Sprite Mode：将精灵切换到指定模式，例如 Idle 或 Running，也可以启动或停止播放。
• Animated Image Mode：启动、停止或重新播放动画图片。
• Play Animation：播放你为控件设置的时间轴动画。
• Modify Flag：添加、移除或切换 LVGL 标志，用于更精细的控制，属于高级选项。
• Call Function：按名称调用自定义 C 函数。需要特殊逻辑时，可以选择此动作，并在固件中实现相应函数。

完整示例

假设你有一个主屏幕，上面有一个 “Settings” 按钮，另有一个设置屏幕。连接步骤如下：

1. 选择 Settings 按钮。
2. 从按钮拖出连接线，连接到设置屏幕，也可以在 Events 面板中将它选为目标。
3. 将 Trigger 设为 Clicked。
4. 将 Action 设为 Change Screen，并将 Destination 设为设置屏幕。
5. 按需选择 Slide left 过渡效果，营造向前进入下一页的感觉。

点击顶部播放按钮，再点击实时预览中的 Settings 按钮，界面就会滑动切换到设置屏幕。无需写代码，也不用烧录设备。

编辑和删除事件

创建的事件都会显示在 Events 面板中：

• 编辑：展开事件卡片，修改触发条件、动作、目标或动作选项。
• 删除：点击卡片上的 ✕，事件及其画布连接线会一同删除。

同一个控件可以添加多个事件。例如分别为 Pressed 和 Released 设置不同动作，实现更丰富的交互。

下一步

配置事件后，静态界面就有了交互。接下来可以：

• 阅读精灵指南，创建具有多种动画状态的控件，并通过 Set Sprite Mode 控制它们。
• 阅读字体指南，让文字显示清晰，同时控制字体文件大小。
• 按照 ESP32 教程，导出界面代码并烧录到设备。