状态容器

1. 组件概述

状态容器是一个高级布局组件，用于根据不同条件显示不同的内容。它可以包含多个”状态”，每个状态对应一套独立的内容，系统会根据设置的显示条件自动判断当前应该展示哪个状态的内容。这个组件非常适合需要在同一位置展示多种不同内容的场景，比如加载中、加载成功、加载失败、数据为空等不同状态的切换展示。

加载中...

查看 JSON

复制 JSON

2. 应用场景示例

• 场景一：AI 回答结果的多状态展示。在 AI 问答应用中，用户提问后需要展示不同状态：等待中显示”正在思考…”的加载提示，回答成功后显示 AI 的回复内容，如果出错则显示错误提示。通过状态容器配置三个状态，分别设置对应的显示条件，即可实现自动切换。
• 场景二：知识问答游戏的答题反馈。在答题类应用中，用户作答后需要根据答案正确与否显示不同内容：答对显示”恭喜你，回答正确！“并配上绿色图标，答错显示”很遗憾，正确答案是…”并配上红色图标。使用状态容器可以在同一位置根据判题结果自动切换展示内容。

加载中...

查看 JSON

复制 JSON

3. 功能配置

基础

配置折叠组

配置项	说明
状态列表	管理容器中的所有状态。每个状态包含”状态名称”和”显示条件”两个配置。点击可展开编辑每个状态的详细设置，也可以通过拖拽调整状态的顺序。系统会按照列表顺序依次检查每个状态的显示条件，显示第一个条件满足的状态内容。如果所有条件都不满足，则不显示任何内容。

状态列表中每个状态的配置项：

配置项	说明
状态名称	给这个状态起一个名字，方便在编辑器中识别和管理。例如”加载中”、“加载成功”、“加载失败”等。这个名称仅用于编辑时的标识，不会显示在最终页面上。
显示条件	设置这个状态何时显示。可以绑定变量来动态判断，当条件为真时显示该状态的内容。例如绑定一个”isLoading”变量，当它为真时显示加载中的状态。如果不设置显示条件，该状态默认显示。

高级

状态折叠组

配置项	说明
可见	控制整个状态容器是否显示。默认可见。可以设置为始终可见，或绑定变量动态控制。
隐藏	控制整个状态容器是否隐藏。与”可见”相反。
禁用	控制状态容器是否禁用。禁用后容器内的交互组件将不可操作。

事件折叠组

配置项	说明
添加事件	支持”点击”、“鼠标移入”、“鼠标移出”三种触发事件。可以在用户与状态容器交互时执行相应动作，例如点击时切换到下一个状态，或鼠标移入时显示更多信息。