介绍

状态按钮是提供类按钮多状态功能的高阶组件。

常见需求涉及具有多个状态的按钮，这些状态在用户交互时循环。例如，空调控制可能在音量设置之间循环：低 → 中 → 高 → 自动 → 低 → ... 每个状态都需要不同的视觉表示。标准LVGL组件如按钮或图像按钮无法在没有大量自定义代码开发的情况下实现此行为。

状态按钮通过启用多个状态的配置来解决此限制，每个状态支持不同的图像和标签。随着状态的转换，配置的视觉元素会自动更新。

组件结构

状态按钮封装了以下组件：

• 容器(x1)：为HoC提供背景
• 图像(x3)：为每个状态显示图像
• 标签(x3)：为每个状态显示标签
• 按钮(x1)：处理用户交互，采用透明样式以确保只有图像、标签和背景可见

属性

状态按钮提供以下可配置属性：

状态 配置HoC的状态数量，每个状态支持：

• 最多3个可配置图像
• 最多3个可配置标签

当前状态 表示HoC的活动状态。可以修改此值以观察视觉变化。

状态按钮配置

默认情况下，状态按钮显示一个图像和一个标签。要显示其他图像和标签，请右键单击HoC并选择编辑以访问HoC编辑器进行配置修改。

默认状态按钮配置如下所示：

默认设置显示为：

可以通过HoC编辑器进行布局调整，其中封装的组件可以像标准组件一样重新定位。

可以隐藏不需要的组件。相反，可以取消隐藏默认隐藏的组件以启用其他图像和标签。

隐藏的组件被排除在代码生成和构建过程之外，有效地将它们视为不存在。

显示所有组件的完整配置状态按钮如下所示：

相应的设置显示为：

对于带圆角的方形形状等替代样式，请右键单击组件并选择编辑以修改外观：

虽然此示例可能不代表最佳美学效果，但用户可以根据自己的喜好自定义设计。

创建自定义状态按钮后，右键单击将其保存为模板组件以在整个项目中重用。