自动化脚本ui编程之单选控件(radio)

ai_coder_ai2026-04-16 8:56

在进行自动化脚本开发时，单选框（Radio） 是实现互斥选项选择 的核心基础控件，广泛应用于任务模式切换、参数配置、性别选择、权限设置、运行策略指定等场景。它与复选框（Checkbox）的核心区别在于：同一组内单选框只能选中一项，保证选择结果唯一性。本文从基础概念、核心属性、事件机制、函数 API、完整 Demo 源码、实战场景、常见问题等维度，全面讲解单选框控件的使用方法。

一、单选框（Radio）控件基础认知

1. 核心定义与定位

冰狐智能辅助中的单选框控件（Radio） ，父类为文本控件（Text） ，继承文本控件的基础样式与属性能力，专门用于在一组互斥选项中选择且仅选择一项。

它是自动化脚本 UI 中配置类交互的首选控件，比如：

  • 自动化任务执行模式：快速模式 / 标准模式 / 深度模式
  • 设备操作权限：允许 / 禁止
  • 数据同步策略：仅 WiFi / 移动网络 / 手动同步
  • 性别、身份类型、操作范围等固定互斥选项

2. 关键使用规则

单选框不能单独生效 ，这是与复选框最大的不同 ------必须嵌套在 radioGroup 控件中，才能实现 "组内互斥选中" 的核心功能。脱离 radioGroup 的单选框，会失去互斥特性，无法达到预期交互效果。

3. 与复选框（Checkbox）核心差异

对比维度 单选框（Radio） 复选框（Checkbox）
选择规则 同组内仅能选 1 项 同组内可多选 / 全选
容器依赖 必须放在 radioGroup 中 无需专属容器，直接使用
适用场景 互斥选项、唯一配置 批量选择、多条件勾选
状态逻辑 选中一项自动取消其他项 选中 / 取消互不干扰

二、单选框核心属性详解

冰狐智能辅助单选框的属性分为基础文本属性 （继承自 Text 控件）和专属选中属性 ，其中checked是最核心的配置项。

1. 基础属性（继承 Text 控件）

  • id ：控件唯一标识，用于 JS 中通过ui(id)获取控件实例，必填且唯一
  • text：单选框显示的文本内容，如 "苹果""快速模式"
  • size：文本字体大小，调整显示清晰度
  • gravity：文本对齐方式，如 center（居中）、left（左对齐）
  • layoutWeight：布局权重，适配不同屏幕尺寸

2. 核心专属属性：checked

checked 用于定义单选框的初始选中状态，仅支持布尔值：

  • checked="true"：初始默认选中
  • checked="false"/ 不设置：初始未选中

支持两种设置方式：

  1. template 静态设置：直接在 XML 标签中写死初始状态，适合固定默认配置
  2. JS 动态设置：通过脚本函数实时修改状态，适合根据逻辑动态调整

3. 静态属性编写示例

XML 复制代码 
<template>
  <linear orientation="vertical">
    <!-- 单选框组：必须包裹radio，实现互斥选择 -->
    <radioGroup>
      <radio id="mode_fast" text="快速模式" checked="true" />
      <radio id="mode_standard" text="标准模式" />
      <radio id="mode_deep" text="深度模式" />
    </radioGroup>
  </linear>
</template>

上述代码中，radioGroup包裹 3 个单选框，checked="true"让 "快速模式" 默认选中，且三者互斥。

三、单选框核心事件：onChecked 选中事件

交互是 UI 控件的核心，单选框的onChecked 事件是监听选择状态变化的唯一入口，用于捕获用户选中 / 取消选中的操作，并执行后续逻辑（如更新配置、提示用户、联动其他控件）。

1. 事件作用

  • 监听单选框选中状态切换
  • 获取当前操作的单选框文本、选中状态
  • 触发业务逻辑：保存配置、更新界面、执行任务分支

2. 事件绑定方式

直接在<radio>标签中通过onChecked="函数名"绑定，函数会在状态变化时自动调用，回调参数包含当前单选框实例 和选中状态（boolean）。

3. 事件回调函数规范

javascript 复制代码 
function 自定义事件名(radio, checked) {
  // radio：当前操作的单选框控件
  // checked：选中状态，true=选中，false=取消选中
  console.log("选中文本：" + radio.text + "，选中状态：" + checked);
  // 后续业务逻辑
}

4. 事件绑定完整示例

XML 复制代码 
<template>
  <linear>
    <radioGroup>
      <radio text="允许权限" onChecked="onRadioChange" checked="true" />
      <radio text="禁止权限" onChecked="onRadioChange" />
    </radioGroup>
  </linear>
</template>

<script>
function main() {
  // 必须调用，初始化UI界面
  setupUI();
}

// 单选框选中事件回调
function onRadioChange(radio, checked) {
  if (checked) {
    console.log("用户选择：" + radio.text);
    toast("已选择：" + radio.text); // 悬浮提示
  }
}
</script>

四、单选框核心 API 函数：checked/value

单选框提供checked() 和value() 两个等效函数，用于动态获取 / 设置选中状态，返回值均为布尔值，使用逻辑完全一致，开发者可按需选择。

1. 函数参数与用法

函数名 参数 用法说明 返回值
checked() 无参数 获取当前选中状态 boolean
checked(isChecked) isChecked（boolean） 设置选中状态（true = 选中，false = 取消） 无
value() 无参数 同 checked ()，获取状态 boolean
value(isChecked) isChecked（boolean） 同 checked ()，设置状态 无

2. 动态操作示例

javascript 复制代码 
// 页面激活时执行（类似Android的onResume）
function onUIResume() {
  // 1. 动态设置选中状态
  ui("mode_deep").checked(true);
  // 等效写法：ui("mode_deep").value(true);

  // 2. 动态获取选中状态
  var isDeepMode = ui("mode_deep").checked();
  console.log("深度模式是否选中：" + isDeepMode);
  // 等效写法：ui("mode_deep").value();
}

3. 核心注意事项

  • 必须先通过ui(id)获取控件实例，再调用函数
  • 设置状态时，同组内其他单选框会自动取消选中，无需手动处理
  • 获取状态仅返回当前控件状态，若需获取组内选中项，需遍历判断

五、单选框完整 Demo 源码（可直接运行）

以下是可直接在冰狐智能辅助平台运行 的完整 Demo，包含静态配置、事件监听、动态操作、组内选中项获取、配置保存五大核心功能，覆盖 90% 以上实战场景，代码注释详尽，便于二次开发。

1. 完整源码

javascript 复制代码 
<template>
  <linear orientation="vertical" padding="10">
    <!-- 标题文本 -->
    <text text="自动化任务配置" size="28" gravity="center" marginBottom="15" />

    <!-- 一、执行模式单选框组 -->
    <text text="1. 选择执行模式：" size="22" marginBottom="5" />
    <radioGroup id="modeGroup" marginBottom="15">
      <radio id="fast" text="快速模式" checked="true" onChecked="onModeChange" />
      <radio id="standard" text="标准模式" onChecked="onModeChange" />
      <radio id="deep" text="深度模式" onChecked="onModeChange" />
    </radioGroup>

    <!-- 二、数据同步策略单选框组 -->
    <text text="2. 数据同步策略：" size="22" marginBottom="5" />
    <radioGroup id="syncGroup" marginBottom="15">
      <radio id="wifi" text="仅WiFi同步" checked="true" onChecked="onSyncChange" />
      <radio id="mobile" text="移动网络同步" onChecked="onSyncChange" />
      <radio id="manual" text="手动同步" onChecked="onSyncChange" />
    </radioGroup>

    <!-- 操作按钮 -->
    <button 
      id="btn_get" 
      text="获取当前配置" 
      onClick="getCurrentConfig" 
      marginBottom="10" 
    />
    <button 
      id="btn_reset" 
      text="重置为默认配置" 
      onClick="resetConfig" 
    />
  </linear>
</template>

<script>
// 程序入口：必须优先调用setupUI()
function main() {
  setupUI();
  console.log("单选框Demo初始化完成");
}

// 页面激活时调用（初始化动态配置）
function onUIResume() {
  // 可在此加载本地保存的配置，动态设置单选框状态
}

// ============== 单选框事件回调 ==============
// 执行模式选择事件
function onModeChange(radio, checked) {
  if (checked) {
    console.log("执行模式切换为：" + radio.text);
    toast("执行模式：" + radio.text);
  }
}

// 同步策略选择事件
function onSyncChange(radio, checked) {
  if (checked) {
    console.log("同步策略切换为：" + radio.text);
    toast("同步策略：" + radio.text);
  }
}

// ============== 按钮点击逻辑 ==============
// 获取当前所有选中配置
function getCurrentConfig() {
  // 获取执行模式选中项
  var fastChecked = ui("fast").checked();
  var standardChecked = ui("standard").checked();
  var deepChecked = ui("deep").checked();
  
  var mode = fastChecked ? "快速模式" 
            : standardChecked ? "标准模式" 
            : "深度模式";

  // 获取同步策略选中项
  var wifiChecked = ui("wifi").checked();
  var mobileChecked = ui("mobile").checked();
  var manualChecked = ui("manual").checked();
  
  var sync = wifiChecked ? "仅WiFi同步" 
             : mobileChecked ? "移动网络同步" 
             : "手动同步";

  // 输出结果
  var result = "当前配置：\n执行模式：" + mode + "\n同步策略：" + sync;
  console.log(result);
  toast(result);
}

// 重置为默认配置
function resetConfig() {
  // 重置执行模式：快速模式
  ui("fast").checked(true);
  // 重置同步策略：仅WiFi同步
  ui("wifi").checked(true);
  toast("已重置为默认配置");
  console.log("配置已重置");
}
</script>

2. Demo 功能说明

  1. 双组单选框：分别管理执行模式、同步策略，互不干扰
  2. 默认选中：页面加载时自动选中默认选项
  3. 实时监听：选择变化时控制台打印 + 悬浮提示
  4. 配置获取：一键获取两组单选框的选中结果
  5. 重置功能：快速恢复初始配置
  6. 规范布局：使用 linear 垂直布局，适配手机屏幕

六、单选框实战开发技巧与最佳实践

1. 组内选中项高效获取

实战中常需获取整个 radioGroup 的选中结果，推荐封装通用函数，避免重复代码：

javascript 复制代码 
// 通用：获取单选框组选中项的文本
function getRadioCheckedText(radioIds) {
  for (var i = 0; i < radioIds.length; i++) {
    if (ui(radioIds[i]).checked()) {
      return ui(radioIds[i]).text;
    }
  }
  return "";
}

// 使用示例
var modeIds = ["fast", "standard", "deep"];
var currentMode = getRadioCheckedText(modeIds);

2. 动态生成单选框

若选项不固定（如从接口获取），可通过 JS 动态创建：

javascript 复制代码 
// 动态添加单选框到radioGroup
function addRadioToGroup(groupId, id, text, isChecked) {
  var radio = {
    id: id,
    text: text,
    checked: isChecked,
    onChecked: "onRadioChange"
  };
  // 冰狐平台动态添加控件API
  addView(groupId, "radio", radio);
}

3. 与自动化业务逻辑联动

单选框选择结果直接决定自动化脚本执行逻辑：

javascript 复制代码 
// 根据执行模式调整任务逻辑
function runTask() {
  if (ui("fast").checked()) {
    // 快速模式：简化步骤，快速执行
    fastRun();
  } else if (ui("standard").checked()) {
    // 标准模式：默认流程
    standardRun();
  } else {
    // 深度模式：全量步骤，精准执行
    deepRun();
  }
}

4. 样式优化建议

  • 统一文本大小：建议 20-24px，兼顾清晰度与布局美观
  • 合理设置间距：通过margin属性避免选项拥挤
  • 分组清晰：不同业务逻辑的单选框，分属不同 radioGroup
  • 默认选中：必设默认项，避免无选中状态导致逻辑异常

七、常见问题与解决方案

1. 问题 1：单选框无法互斥，可多选

原因 ：未放在radioGroup中，或多个组嵌套错误解决方案：严格将同组 radio 包裹在一个 radioGroup 内，不同组用不同 radioGroup

2. 问题 2：JS 获取不到控件状态

原因：

  • id 拼写错误
  • 未调用setupUI()就操作控件
  • 函数执行时机过早（UI 未初始化完成）解决方案：
  • 核对 id 一致性
  • main 函数第一行必须setupUI()
  • 放在onUIResume或事件回调中操作

3. 问题 3：选中事件不触发

原因：

  • onChecked 绑定的函数名拼写错误
  • 函数未定义
  • 控件未正确初始化解决方案：
  • 检查标签与函数名一致
  • 确保函数在 script 中定义
  • 重启脚本重新初始化 UI

4. 问题 4：动态设置状态不生效

原因：

  • 参数不是布尔值（如写checked("true")）
  • 控件 id 错误解决方案：
  • 严格使用true/false布尔值
  • 确认 id 正确无误

八、总结

单选框（Radio）是冰狐智能辅助自动化脚本 UI 开发中配置类交互的基石，核心要点可总结为：

  1. 必须依赖 radioGroup：实现互斥选择，这是使用前提
  2. 核心属性 checked：控制初始选中状态，支持静态 / 动态设置
  3. 核心事件 onChecked：监听选择变化，处理业务逻辑
  4. 核心 APIchecked/value：动态读写状态，适配复杂逻辑
  5. 规范使用：分组清晰、默认选中、样式统一，提升用户体验

掌握本文内容，即可快速开发出规范、稳定、易用的单选框界面，满足自动化脚本中互斥选项配置的所有需求。结合冰狐智能辅助的其他控件（按钮、输入框、复选框、下拉框），可快速构建完整的自动化脚本 UI，大幅提升脚本的易用性与专业性。

相关推荐
qq_452396232 小时前
【工程实战】第四篇：UI 自动化 —— Playwright 异步模式深度实战：告别 Selenium 的“脆”与“慢”
selenium·ui·自动化
空中海2 小时前
第二章：UI 开发——View 系统与 Jetpack Compose
android·ui
程序猿追2 小时前
把手机变成调色盘：用 ArkUI 搓一个带放大镜效果的“UI 灵感色卡取色器”
ui·智能手机
ai_coder_ai14 小时前
在自动化脚本ui编程之webview控件
ui·autojs·自动化脚本·冰狐智能辅助·easyclick
RReality15 小时前
【Unity Shader URP】色带渐变着色（Ramp Shading）实战教程
ui·unity·游戏引擎·图形渲染
小樱花的樱花1 天前
4 文件选择对话框 QFileDialog
开发语言·c++·ui
jingxindeyi1 天前
electron 配置 shadcn-ui
javascript·ui·electron
可达鸭小栈1 天前
易语言自绘UI实战：基于美易模块的登录界面快速开发（可换肤）
ui
lpfasd1231 天前
Flutter 2026：从跨平台UI到AI原生全栈开发平台的蜕变
flutter·ui·ai-native
热门推荐
012026年4月技术前沿：AI大模型爆发、智能体革命与量子安全新纪元02GitHub 镜像站点03一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛04GPT-6核心能力解析及与现有主流大模型对比05基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南06GPT-6发布日深度解析-Symphony架构200万Token实战07零成本！Ollama本地部署国产大模型全指南（支持Kimi-K2.5/GLM-5/Qwen，新手秒上手）08AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析09从限购到畅通：GLM-5.1 Coding Plan接入攻略10CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南