博客摘要

本文基于两份完整工程代码（6.12RadioDemo.ets、Index.ets）拆解Radio单选组件两种开发场景：静态个人信息展示卡片、带@State响应式动态表单。同时综合运用Row/Column/Flex线性布局、Image圆形头像、Stack层叠卡片、Button交互按钮，覆盖单选框分组互斥、状态双向绑定、页面卡片排版全套知识点，适合鸿蒙 ArkUI 表单开发入门学习。

一、核心前置知识点

1. Radio 单选组件基础

1. group分组属性：同 group 名称的 Radio 自动互斥，同一时间仅能选中一个；不同 group 相互独立，适合多道选择题表单。
2. .checked(bool)：控制单选框勾选状态，可绑定@State变量实现动态刷新。
3. .onChange(callback)：点击单选框触发回调，更新响应式状态变量。

2. 配套布局容器

表格

Demo1：6.12RadioDemo.ets 静态个人信息卡片（纯布局展示）

完整源码

页面结构解析

1. 外层根Column：页面垂直布局，浅灰色页面底色；
2. 白色卡片容器：包裹全部内容，圆角 + 内边距区分页面底色；
3. 顶部标题：加粗大号文字「个人信息中心」；
4. Row横向组合：圆形头像 Image + 两行个人介绍文字；
5. 底部Row并排两个操作按钮：编辑资料、查看详情；

核心技巧

• 圆形头像实现：width=80 height=80 borderRadius=40，圆角数值等于宽高一半；
• 卡片分层视觉：页面浅灰底色 + 白色内容卡片，提升层次感；
• Row({space:20})快速设置水平组件间距，无需手动 margin。

Demo2：Index.ets 响应式单选表单（@State 动态绑定）

完整可运行源码

核心逻辑拆解

1. @State 响应式驱动 定义gender、edu两个字符串变量存储选中项，单选框点击修改变量后，页面.checked()自动刷新勾选状态；
2. 分组互斥规则
   • 性别 Radio 统一group:'gender'，只能选男 / 女其中一个；
   • 学历 Radio 统一group:'edu'，只能单选高中 / 大专 / 本科 / 硕士； 两组 group 名称不同，选择互不干扰；
3. Flex 弹性布局适配
   • 性别：默认横向排列，空间充足不换行；
   • 学历：开启wrap:FlexWrap.Wrap，屏幕宽度不足时自动换行，适配小屏手机；
4. Stack 层叠卡片 底层白色表单容器，顶层叠加 5px 红色装饰条，实现网页常见表单卡片样式；
5. 提交交互 底部按钮点击后，控制台打印当前选中的性别、学历，模拟表单提交逻辑。