Skip to content

单选按钮

单选按钮用于在一组选项中选择一项,适合满意度、分类、状态和偏好选择等场景。当前小程序和 H5 编辑器支持固定选项与动态数组两种数据方式,并可在选项变化时触发事件。

添加到独立页面

为了便于配置和验证,建议先在独立页面中完成单选按钮示例:

  1. 打开低代码应用并切换到 用户界面
  2. 单击画布底部的 新建页面
  3. 在左侧 组件 面板的输入组件区域找到 单选按钮
  4. 将组件拖入新页面。
  5. 切换到 结构,确认当前页面只包含这个单选按钮组件。
  6. 选中组件,在右侧面板配置属性和事件。

单选按钮独立页面和属性配置

常用属性

当前版本在 属性 > 常用设置 中提供以下配置:

配置项作用
name组件在表单或页面数据中的字段名
标签控制是否显示组件标签
标签内容设置标签文字,也可以插入变量
是否必填控制表单提交时是否要求选择
选项内容在固定内容和动态内容之间切换
默认值设置页面打开时默认选中的选项
组件布局设置标签与选项区域采用上下或左右布局
垂直对齐设置内容在组件区域中的上、中、下对齐方式

页面下方还提供位置、尺寸、容器样式、变换、指针、状态和可见性等通用配置。修改这些配置后,应同时检查编辑画布和预览页面。

配置固定选项

固定内容适合选项在设计阶段已经确定的场景。例如创建满意度选项:非常满意、一般、不满意。

  1. 选项内容 中选择 固定内容
  2. 选项设置 中修改默认选项文字。
  3. 单击 + 添加更多选项。
  4. 拖动选项左侧的排序入口调整顺序。
  5. 单击选项右侧的删除按钮移除不需要的选项。
  6. 默认值 中选择页面打开时默认选中的一项。
  7. 根据页面空间选择 上下左右 布局。

当前固定内容区域直接维护选项文本,没有单独显示“选项名称”和“选项值”两个输入框。需要名称和值映射时,应使用动态内容。

配置动态选项

动态内容适合让选项随工作流、接口或页面数据变化。

  1. 选项内容 中选择 动态内容
  2. 绑定数组 中选择一个 Array 类型的数据源。
  3. 选项名称 中选择用于页面展示的字段。
  4. 选项值 中选择实际提交或参与后续逻辑的字段。
  5. 打开预览,确认每个数组元素都能生成一个选项。

例如,数据源为:

json
[
  { "label": "非常满意", "value": "good" },
  { "label": "一般", "value": "normal" },
  { "label": "不满意", "value": "bad" }
]

可以将 选项名称 映射到 label,将 选项值 映射到 value

如果选项名称或选项值下拉框不可选,先检查是否已经绑定有效的数组,以及数组元素是否包含可识别的字段。

设置默认值

默认值必须与固定选项或动态选项中的某个实际值对应。设置后,应在预览页面检查:

  • 页面首次打开时是否正确选中目标项。
  • 动态数组加载完成后默认值是否仍然存在。
  • 默认值与选项数据类型是否一致。
  • 必填状态下是否能够正常提交。

动态选项的数据尚未加载或默认值不在选项列表中时,组件可能保持未选择状态。

读取当前选择

需要在其他组件或事件中使用当前选择时,使用变量选择器选择单选按钮组件及其当前值。建议通过界面提供的变量插入入口完成绑定,不要手动猜测组件引用格式。

常见用途包括:

  • 将当前选择写入界面变量。
  • 把选择结果传给工作流。
  • 根据选择结果显示不同提示文字。
  • 在页面跳转时携带当前选择。

配置数据改变事件

单选按钮当前提供 数据改变时 事件。当用户选择其他选项时,可以执行以下动作:

  • 调用工作流:把当前选择传给工作流处理。
  • 展示提示信息:向用户反馈当前操作结果。
  • 控制组件:更新其他组件的数据、禁用或显示状态。
  • 界面变量赋值:把当前选择保存到界面变量。
  • 页面跳转:根据选择进入其他页面。

配置步骤如下:

  1. 选中单选按钮,在右侧切换到 事件
  2. 单击 新建
  3. 保持事件类型为 数据改变时
  4. 选择一个执行动作。
  5. 根据动作填写目标组件、工作流、界面变量或页面等参数。
  6. 单击 确定
  7. 打开预览并切换选项,确认动作只触发一次且接收到正确值。

控制必填、状态和可见性

  • 表单场景需要强制选择时,打开 是否必填
  • 需要阻止用户修改时,通过事件中的 控制组件 设置禁用状态。
  • 需要按条件显示或隐藏时,展开 可见性,配置常用条件或表达式。

条件中使用动态数据时,应分别验证条件成立和不成立两种情况,避免组件始终隐藏或始终显示。

预览结果

完成固定选项、默认值和布局配置后,单击预览入口。示例页面只保留一个单选按钮,便于确认:

  • 标签“请选择”正常显示。
  • 选项 1、选项 2、选项 3 依次排列。
  • 默认值正确选中。
  • 切换选项时只保留一个选中状态。

单选按钮独立页面实际效果

常见问题

动态选项没有显示

检查绑定的数据是否为数组,并确认已经为选项名称和选项值选择有效字段。工作流数据还未返回时,组件不会生成选项。

默认值没有选中

检查默认值是否与选项实际值完全一致,包括数据类型。字符串 1 与数字 1 可能被视为不同值。

事件没有触发

确认事件类型为 数据改变时,事件已经确定保存,并在预览中实际切换到另一个选项。仅打开页面但没有改变选择时,不会触发该事件。

表单无法提交

如果已打开 是否必填,必须先选择一项。还应检查组件的 name 是否符合当前表单的数据要求。