文章目录
- 前言
- 这个写法的价值
- 组件 API 对照
- 关键代码说明
- 完整代码
- 写在最后
前言
这组案例开始进入选择类和调节类组件，写业务页面时会经常遇到。这个案例围绕Radio 垂直列表展开，重点不是把属性背下来，而是弄清楚状态、组件和用户操作之间怎么连起来。
这篇我会把重点放在列表选择上，尽量说清楚它在真实页面里有什么用。
这个写法的价值
如果把它放到真实项目里，常见位置可能是设置页、筛选页、编辑页，或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下，页面就应该给出明确反馈。
| 维度 | 内容 |
|---|---|
| 案例主题 | Radio 垂直列表 |
| 核心 API | ForEach |
| 使用场景 | 尺码选择 |
| 文章侧重点 | 列表选择 |
组件 API 对照
代码结构可以按三层读：外层负责页面背景和留白，中间卡片承载主要内容，内部组件处理具体交互。这样的层级不花哨，但维护起来比较舒服。
我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途，比随手写
flag、value后面省心很多。
关键代码说明
先看一段连续代码，基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。
interfaceSizeItem{value:stringlabel:stringdesc:string}@Entry@Componentstruct VerticalSizeRadioList{@StateisShow:boolean=true@StateselectedSize:string='M'build(){Column(){if(this.isShow){Column(){Text('Radio 垂直列表 - 选择尺码').fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})这段代码可以拆成几块看：
@State保存当前页面状态，用户操作之后会触发 UI 更新。ForEach是案例的关键入口，真正的行为通常由它和事件回调一起完成。- 布局属性服务于业务表达，选中、禁用、拖动这些状态最好都能在视觉上看出来。
完整代码
下面是整理后的完整代码。组件名已经改成VerticalSizeRadioList，共享颜色也内置到当前文件里，单独复制出来读会更方便。
constPAGE_BG_COLOR:string='#F5F6FA'constCARD_BG_COLOR:string='#FFFFFF'constSUBTEXT_COLOR:string='#8A8A8A'interfaceSizeItem{value:stringlabel:stringdesc:string}@Entry@Componentstruct VerticalSizeRadioList{@StateisShow:boolean=true@StateselectedSize:string='M'build(){Column(){if(this.isShow){Column(){Text('Radio 垂直列表 - 选择尺码').fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})Column(){ForEach([{value:'XS',label:'XS 加小码',desc:'胸围82-86'},{value:'S',label:'S 小码',desc:'胸围86-90'},{value:'M',label:'M 中码',desc:'胸围90-94'},{value:'L',label:'L 大码',desc:'胸围94-98'},{value:'XL',label:'XL 加大码',desc:'胸围98-102'}],(item:SizeItem)=>{Row(){Radio({value:item.value,group:'sizeGroup'}).checked(this.selectedSize===item.value).onChange((c:boolean)=>{if(c)this.selectedSize=item.value})Column(){Text(item.label).fontSize(14).fontWeight(FontWeight.Medium)Text(item.desc).fontSize(11).fontColor(SUBTEXT_COLOR)}.alignItems(HorizontalAlign.Start).margin({left:8})}.width('100%').padding({top:10,bottom:10}).border({width:{bottom:0.5},color:'#F0F0F0'})})}}.width('100%').padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text('尺码单选列表：Radio 垂直列表 - 列表式单选').fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width('100%').height('100%').backgroundColor(PAGE_BG_COLOR).padding(16)}}写在最后
继续扩展的话，我会把静态选项抽成接口返回的数据，再补上空状态和异常状态。示例页面先把核心交互跑通就够了，到了业务页面，状态边界才是真正容易出问题的地方。
