HarmonyOS7 尺码单选列表：用 ForEach 做好尺码选择

发布时间：2026/10/16 22:14:51

HarmonyOS7 尺码单选列表：用 ForEach 做好尺码选择
文章目录前言这个写法的价值组件 API 对照关键代码说明完整代码写在最后前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕Radio 垂直列表展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。这篇我会把重点放在列表选择上尽量说清楚它在真实页面里有什么用。这个写法的价值如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题Radio 垂直列表核心 APIForEach使用场景尺码选择文章侧重点列表选择组件 API 对照代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。关键代码说明先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。interfaceSizeItem{value:stringlabel:stringdesc:string}EntryComponentstruct VerticalSizeRadioList{StateisShow:booleantrueStateselectedSize:stringMbuild(){Column(){if(this.isShow){Column(){Text(Radio 垂直列表 - 选择尺码).fontSize(16).fontWeight(FontWeight.Bold).margin({bottom:12})这段代码可以拆成几块看State保存当前页面状态用户操作之后会触发 UI 更新。ForEach是案例的关键入口真正的行为通常由它和事件回调一起完成。布局属性服务于业务表达选中、禁用、拖动这些状态最好都能在视觉上看出来。完整代码下面是整理后的完整代码。组件名已经改成VerticalSizeRadioList共享颜色也内置到当前文件里单独复制出来读会更方便。constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstSUBTEXT_COLOR:string#8A8A8AinterfaceSizeItem{value:stringlabel:stringdesc:string}EntryComponentstruct VerticalSizeRadioList{StateisShow:booleantrueStateselectedSize:stringMbuild(){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.selectedSizeitem.value).onChange((c:boolean){if(c)this.selectedSizeitem.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)}}写在最后继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。

相关新闻

树数据结构与遍历算法全面解析

树数据结构与遍历算法全面解析

1. 树的基本概念与核心特性树（Tree）是计算机科学中最基础且应用最广泛的数据结构之一，它模拟了自然界中树的层次结构。与线性结构的数组和链表不同，树是一种非线性的、分层的数据结构，特别适合表示具有层级关系的数据。…

2026/10/17 14:58:24 阅读更多 →
从0到200万粉丝：个人品牌打造与网红孵化实战指南

从0到200万粉丝：个人品牌打造与网红孵化实战指南

1. 项目背景与核心逻辑拆解 "帮老婆成为网红"这个看似简单的命题背后，实际上是一套完整的个人品牌打造体系。作为微博创始团队成员，我深知社交平台的内容分发机制和用户增长逻辑。过去三年里，我帮妻子从0开始运营账号，目…

2026/10/16 22:00:51 阅读更多 →
星载与高可靠系统中的芯片封装全样式研究——从传统引脚到陶瓷气密的工程选型分析

星载与高可靠系统中的芯片封装全样式研究——从传统引脚到陶瓷气密的工程选型分析

摘要芯片封装是连接裸片与系统电路的物理桥梁，直接决定了器件的电气性能、散热能力、抗机械冲击与抗空间辐射能力。本文在商业航天与高可靠电子系统的背景下，系统梳理通孔插装、表面贴装、阵列封装、晶圆级封装、倒装芯片以及高可靠陶瓷气密封装等主流样…

2026/10/17 4:41:49 阅读更多 →

最新新闻

Microsoft Agent Framework Skills 执行 Scripts 实战：用 TaoToken 统一 Key 打通 Python 与 C# 调用链

Microsoft Agent Framework Skills 执行 Scripts 实战：用 TaoToken 统一 Key 打通 Python 与 C# 调用链

/* 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 21:41:45 阅读更多 →
C++高性能Web框架Drogon入门教程二：Windows10下安装Drogon并用VSCode搭建开发环境（TaoToken统一Key配置AI辅助）

C++高性能Web框架Drogon入门教程二：Windows10下安装Drogon并用VSCode搭建开发环境（TaoToken统一Key配置AI辅助）

/* 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 21:41:45 阅读更多 →
OpenRouter 免费模型接入智能体教程：model-connector Skill 全自动接入（2026 实测）

OpenRouter 免费模型接入智能体教程：model-connector Skill 全自动接入（2026 实测）

/* 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 21:41:45 阅读更多 →
Mask-Predict并行解码实战：文本生成加速10倍的迭代精炼方法

Mask-Predict并行解码实战：文本生成加速10倍的迭代精炼方法

条件掩码语言模型的并行解码，这个方向我在做文本生成加速的时候踩过不少坑。最早接触自回归解码那套东西，生成一段两百字的文本要等好几秒，用户端体验很差。后来看到Mask-Predict这篇工作，思路确实让人眼前一亮——它把生成任务从…

2026/10/17 21:41:45 阅读更多 →
数据库入门：从SPJ案例理解关系模型与SQL本质

数据库入门：从SPJ案例理解关系模型与SQL本质

简介：本资源是《数据库系统概论（第5版）》王珊、萨师煊主编教材的配套课后习题参考答案，面向高校计算机、软件工程、信息管理等专业本科生及数据库初学者，用于辅助理解关系模型、SQL语言、关系代数等核心理论与实践难点…

2026/10/17 21:41:45 阅读更多 →
爆肝3天，开源AI原生截图神器：拓！可以塞进任何Agent使用～

爆肝3天，开源AI原生截图神器：拓！可以塞进任何Agent使用～

/* 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 21:40:44 阅读更多 →

日新闻

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 阅读更多 →