HarmonyOS7 单选回调记录器:用 onChange 做好事件记录
文章目录前言这个写法的价值组件 API 对照关键代码说明完整代码写在最后前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕Radio 回调监听展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。这篇我会把重点放在状态日志上尽量说清楚它在真实页面里有什么用。这个写法的价值如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题Radio 回调监听核心 APIonChange使用场景事件记录文章侧重点状态日志组件 API 对照代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。关键代码说明先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。interfaceRadioChangeLoggerItem{v:stringl:stringdesc:string}EntryComponentstruct RadioChangeLogger{StateisShow:booleantrueStateselectedLang:stringarktsStatemessage:string当前选择: ArkTSbuild(){Column(){if(this.isShow){Column(){Text(Radio onChange 回调).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})这段代码可以拆成几块看State保存当前页面状态用户操作之后会触发 UI 更新。onChange是案例的关键入口真正的行为通常由它和事件回调一起完成。布局属性服务于业务表达选中、禁用、拖动这些状态最好都能在视觉上看出来。完整代码下面是整理后的完整代码。组件名已经改成RadioChangeLogger共享颜色也内置到当前文件里单独复制出来读会更方便。constCOLOR_OPTIONS:Array{name:string;value:string}[{name:蓝色,value:#4D96FF},{name:绿色,value:#6BCB77},{name:黄色,value:#FFD93D},{name:红色,value:#FF6B6B},{name:紫色,value:#9B59B6},{name:橙色,value:#FFA500},{name:青色,value:#00BCD4},{name:粉色,value:#FF69B4},{name:灰蓝,value:#607D8B},{name:深色,value:#333333}]constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstSUBTEXT_COLOR:string#8A8A8AinterfaceRadioChangeLoggerItem{v:stringl:stringdesc:string}EntryComponentstruct RadioChangeLogger{StateisShow:booleantrueStateselectedLang:stringarktsStatemessage:string当前选择: ArkTSbuild(){Column(){if(this.isShow){Column(){Text(Radio onChange 回调).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})Text(this.message).fontSize(14).fontColor(COLOR_OPTIONS[3].value).fontWeight(FontWeight.Bold).width(100%).padding(12).textAlign(TextAlign.Center).backgroundColor(COLOR_OPTIONS[3].value15).borderRadius(8).margin({bottom:12})Column(){ForEach([{v:arkts,l:ArkTS,desc:HarmonyOS 原生开发语言},{v:java,l:Java,desc:经典企业级开发语言},{v:js,l:JavaScript,desc:Web 前端开发语言}],(item:RadioChangeLoggerItem){Row(){Radio({value:item.v,group:langGroup}).checked(this.selectedLangitem.v).onChange((checked:boolean){if(checked){this.selectedLangitem.vthis.message当前选择:${item.l}-${item.desc}}})Column(){Text(item.l).fontSize(14).fontWeight(FontWeight.Medium)Text(item.desc).fontSize(11).fontColor(SUBTEXT_COLOR)}.alignItems(HorizontalAlign.Start).margin({left:8})}.margin({bottom:12})})}}.width(100%).padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text(单选回调记录器Radio onChange - 回调实时更新显示).fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}写在最后继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。

相关新闻

C++封装Windows窗口:从Win32 API到高复用性类的工程实践

C++封装Windows窗口:从Win32 API到高复用性类的工程实践

1. 项目概述:为什么需要封装Windows窗口?在Windows桌面应用开发中,直接使用原始的Win32 API创建和管理窗口,就像用最原始的工具盖房子。你需要自己处理WNDCLASSEX、RegisterClassEx、CreateWindowEx、WndProc这一整套流程&#xf…

2026/10/17 7:52:48 阅读更多 →
HarmonyOS7 禁用单选项:用 enabled 做好不可选项

HarmonyOS7 禁用单选项:用 enabled 做好不可选项

文章目录前言交互链路先理清数据和 UI 的对应关系关键实现细节完整代码可以继续扩展的方向前言 这组案例开始进入选择类和调节类组件,写业务页面时会经常遇到。这个案例围绕 Radio 禁用状态 展开,重点不是把属性背下来,而是弄清楚状态、组件…

2026/10/17 15:22:53 阅读更多 →
具身智能的TVA-VLA双引擎架构(7)

具身智能的TVA-VLA双引擎架构(7)

前沿技术探索:AI智能体视觉(TVA,Transformer-based Vision Agent)是依托Transformer架构与“因式智能体”理论所构建的颠覆性工业视觉技术,是集深度强化学习(DRL)、卷积神经网络(CNN…

2026/10/17 15:26:09 阅读更多 →

最新新闻

Python Flask + MySQL学生成绩管理系统源码全解析

Python Flask + MySQL学生成绩管理系统源码全解析

简介:面向需要完成数据库课程设计的高校学生,这份MySQL学生成绩管理系统课设报告提供了一套完整的系统设计与实现方案。该系统基于Python Flask与MySQL构建,覆盖管理员、教师、学生三类用户角色,实现选课、成绩录入、修改、删除、…

2026/10/17 23:09:02 阅读更多 →
为什么别人的OpenClaw比你好用?3分钟搞懂Skill:是什么、怎么用、怎么创建,一篇讲透

为什么别人的OpenClaw比你好用?3分钟搞懂Skill:是什么、怎么用、怎么创建,一篇讲透

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/17 23:09:02 阅读更多 →
OpenClaw 集成 SearXNG 实现本地搜索:把 Brave API 换成 TaoToken 统一通道的配置清单

OpenClaw 集成 SearXNG 实现本地搜索:把 Brave API 换成 TaoToken 统一通道的配置清单

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/17 23:09:02 阅读更多 →
Codex 通过 CC Switch 接入 DeepSeek 保姆级教程:TaoToken 统一 Key 与路由配置

Codex 通过 CC Switch 接入 DeepSeek 保姆级教程:TaoToken 统一 Key 与路由配置

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/17 23:09:02 阅读更多 →
本地 AI 智能体 OpenClaw 上手实操|5 分钟完成 Windows 部署与 TaoToken 通道配置

本地 AI 智能体 OpenClaw 上手实操|5 分钟完成 Windows 部署与 TaoToken 通道配置

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/17 23:09:02 阅读更多 →
VLSM可变长子网掩码实战:从FLSM翻车到CIDR路由汇总

VLSM可变长子网掩码实战:从FLSM翻车到CIDR路由汇总

1. 从一个真实翻车现场说起:为什么固定子网掩码不够用刚入行那会儿,我接手过一个园区网的地址规划。当时拿到手的任务很简单:把 192.168.10.0/24 这个 C 类网段分给四个部门用。我心想这有什么难的,直接一分为四,每个部…

2026/10/17 23:08:02 阅读更多 →

日新闻

DeepSeek选型与部署:V3/R1、Ollama、API全攻略

DeepSeek选型与部署:V3/R1、Ollama、API全攻略

简介:《DeepSeek使用方法.pdf》是一份面向DeepSeek入门及进阶用户的完整使用指南,重点围绕V3与R1两款模型的能力差异与适用场景展开,帮助读者根据任务类型与成本选择合适的模型。资源共1个PDF文件,压缩包大小约311KB,篇…

2026/10/17 0:00:25 阅读更多 →
200+Deepseek润色指令拆解:从底层原理到场景落地的完整指南

200+Deepseek润色指令拆解:从底层原理到场景落地的完整指南

简介:这是一份聚焦DeepSeek提示词优化的《200Deepseek润色指令》PDF文档,共收录两百余条可直接套用的润色指令,涵盖语法修正、风格统一、逻辑梳理、表达精炼等维度,并针对商务写作、学术论文、广告文案等场景给出差异化建议。文档…

2026/10/17 0:00:25 阅读更多 →
OpenCV轮廓法物体计数系统:轻量、可控、可落地的工业级实现

OpenCV轮廓法物体计数系统:轻量、可控、可落地的工业级实现

简介:本资源是一份基于OpenCV的本科课程设计完整报告,面向计算机视觉初学者、图像处理学习者及高校通信/信息类专业学生,解决物体智能计数与检测结果结构化记录的实际问题。项目覆盖图像预处理、轮廓检测、边界框绘制、轨迹栏交互式参数调节、…

2026/10/17 0:00:25 阅读更多 →

周新闻

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

流感时间序列预测实战:ARIMA/LSTM全流程拆解与避坑指南

简介:基于 ARIMA、LSTM、Transformer 等模型的流感时间序列预测 Python 源码,面向计算机相关专业课程设计与期末大作业学生,以及项目实战学习者。内容覆盖预处理、平稳性检验、定阶、残差分析、多模型对比预测的完整时序建模流程,…

2026/10/16 21:35:51 阅读更多 →
影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别

影刀RPA新手教程:键盘模拟输入实战——输入文本与模拟按键的区别 做影刀RPA自动化,十个新手有八个栽在"往输入框里填东西"这件事上:要么填不进去,要么填了一半,要么直接把原来内容追加在后面。这背后的根因&…

2026/10/17 1:44:59 阅读更多 →
影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容

影刀RPA新手教程:阅文起点小说数据采集实战——书籍信息与章节内容 1. 认识影刀:什么场景该用RPA采小说数据 起点中文网的页面结构相对稳定——分类榜单、书籍详情、章节内容三块独立页面,跳转链路清晰。这种场景非常适合影刀自动化&#x…

2026/10/16 15:04:24 阅读更多 →

月新闻

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路:用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 21:54:38 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式:TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/17 17:22:31 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc(含博客园搬家等嵌套结构);.toc-box 在侧栏,不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p(:empty 仍占 20px),一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/16 14:23:36 阅读更多 →