文章目录标签云不要写死列数数据结构先看这里状态变量负责让页面动起来布局代码怎么读交互逻辑别藏太深使用时我会怎么改完整代码代码里的几个细节常见改造坑写在最后标签长度不固定写死列数很难维护。这里让容器自己换行状态只管选中反馈。这类页面最值得看的不是某一行样式而是“数据怎么喂给 UI状态怎么让 UI 变化”。只要这条线顺了后面换业务数据不会太痛苦。标签云不要写死列数这个案例对应的是「标签云选择器」。如果只是运行一下效果当然很快但真要把它改进自己的项目里最好先把页面分成“数据层、状态层、布局层、交互层”四块。我比较推荐这种读法先看interface定义再看State最后看build()里的Column、Row、Flex怎么嵌套。这样不容易被一长串样式绕晕。数据结构先看这里这份代码里的核心数据模型是标签数据结构。它决定了页面每一项需要哪些字段比如标题、描述、颜色、状态、价格、数量、角标等。很多 ArkUI 页面写得乱根源不是布局而是数据字段没想清楚。如果你要接真实接口优先改这一层。接口字段名和页面字段名不一致也没关系可以在请求完成后做一次映射别把接口返回结构直接塞进 UI 里。那样短期省事后面改样式会很难受。状态变量负责让页面动起来这个案例里最关键的状态是selectedTags。它不是摆设页面里的选中、展开、切换、数量变化、输入内容基本都靠它驱动。写 HarmonyOS7 ArkUI 页面时我会刻意把“会变的东西”和“不会变的静态数据”分开。像标签列表这种列表数据负责提供内容selectedTags负责描述当前用户操作后的界面状态。这样读代码时很清楚数据从哪里来界面为什么变。布局代码怎么读布局部分不要从第一行样式读到最后一行这样很累。先找最外层容器看页面是纵向结构还是横向结构再看每个区域内部是Row、Column还是Flex。这个案例的布局重点是FlexWrap.Wrap负责自动换行不需要手动计算一行放几个标签。如果你调页面时发现内容挤压、对齐不准、间距失控优先检查这几个地方固定宽高是不是太多layoutWeight或Blank是否用对列表项里长文本有没有设置省略Flex 换行条件是否满足。交互逻辑别藏太深这个页面的交互主线是点击标签会加入或移出已选集合底部确认按钮跟着变可用状态。小案例里直接在.onClick()里改状态没问题读起来也直观。但如果后面业务变复杂比如要请求接口、弹确认框、写缓存就别把逻辑全塞在事件回调里。可以拆成一个私有方法让 UI 代码只表达“点了什么”具体怎么处理交给方法。使用时我会怎么改如果你只是学习布局直接运行下面代码就行。如果你准备放进项目里我建议按这个顺序改先替换数据数组再调整颜色和字体最后再改交互逻辑。还有一个小经验不要一开始就把所有东西拆成组件。先让页面跑通等你发现某个卡片、按钮组、列表项重复出现两三次再抽成Builder或单独组件。这样代码会更贴近真实需求。完整代码/** * Flex wrap标签云布局 * 知识点FlexWrap.Wrap 换行多行标签自适应排列 */ interface TagItem { id: number label: string selected: boolean category: string color: string bgColor: string } Entry Component struct TagCloudSelectionPage { State tagList: TagItem[] [ { id: 1, label: JavaScript, selected: false, category: 前端, color: #F7A400, bgColor: #FFF8E8 }, { id: 2, label: TypeScript, selected: true, category: 前端, color: #3178C6, bgColor: #EAF3FF }, { id: 3, label: ArkTS, selected: true, category: 鸿蒙, color: #007DFF, bgColor: #EAF3FF }, { id: 4, label: HarmonyOS, selected: false, category: 鸿蒙, color: #FF4D4D, bgColor: #FFF0F0 }, { id: 5, label: Vue.js, selected: false, category: 前端, color: #42B883, bgColor: #EDFAF4 }, { id: 6, label: React, selected: false, category: 前端, color: #61DAFB, bgColor: #E8FBFF }, { id: 7, label: 数据结构, selected: false, category: 基础, color: #9B59B6, bgColor: #F5EEFF }, { id: 8, label: 算法, selected: true, category: 基础, color: #E67E22, bgColor: #FFF4EC }, { id: 9, label: Git, selected: false, category: 工具, color: #F05032, bgColor: #FFF0EC }, { id: 10, label: Docker, selected: false, category: 工具, color: #2496ED, bgColor: #EAF5FF }, { id: 11, label: Android, selected: false, category: 移动, color: #3DDC84, bgColor: #EBFEF4 }, { id: 12, label: iOS/Swift, selected: false, category: 移动, color: #FA7343, bgColor: #FFF2EC }, { id: 13, label: Node.js, selected: false, category: 后端, color: #339933, bgColor: #EDFAED }, { id: 14, label: Python, selected: false, category: 后端, color: #3776AB, bgColor: #EAF3FF }, { id: 15, label: 机器学习, selected: false, category: AI, color: #FF6B6B, bgColor: #FFF0F0 }, { id: 16, label: UI设计, selected: false, category: 设计, color: #FF61B8, bgColor: #FFF0F8 }, { id: 17, label: 产品思维, selected: false, category: 设计, color: #8E44AD, bgColor: #F8EEFF }, { id: 18, label: SQL, selected: false, category: 数据库, color: #4479A1, bgColor: #EAF3FF }, ] private get selectedCount(): number { return this.tagList.filter(t t.selected).length } private get selectedLabels(): string { return this.tagList.filter(t t.selected).map(t t.label).join(、) } toggleTag(id: number): void { const idx this.tagList.findIndex(t t.id id) if (idx 0) { const updated this.tagList[idx] updated.selected !updated.selected this.tagList[idx] updated // 触发响应式更新 this.tagList this.tagList.slice() } } build() { Column({ space: 0 }) { // 顶部标题 Column({ space: 4 }) { Text(选择你感兴趣的技术标签) .fontSize(20) .fontWeight(FontWeight.Bold) .fontColor(#1A1A1A) Text(已选 this.selectedCount 个标签至少选择 3 个) .fontSize(14) .fontColor(this.selectedCount 3 ? #07C160 : #FF8C00) } .padding({ left: 16, right: 16, top: 24, bottom: 20 }) .alignItems(HorizontalAlign.Start) .width(100%) // 标签云 - Flex Wrap 换行 Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap, alignContent: FlexAlign.Start }) { ForEach(this.tagList, (tag: TagItem) { Row({ space: 6 }) { if (tag.selected) { Text(✓) .fontSize(12) .fontColor(tag.color) .fontWeight(FontWeight.Bold) } Text(tag.label) .fontSize(14) .fontColor(tag.selected ? tag.color : #666666) .fontWeight(tag.selected ? FontWeight.Medium : FontWeight.Normal) } .padding({ left: 14, right: 14, top: 8, bottom: 8 }) .backgroundColor(tag.selected ? tag.bgColor : #FFFFFF) .borderRadius(20) .border({ width: 1.5, color: tag.selected ? tag.color : #E8E8E8 }) .margin({ right: 10, bottom: 10 }) .onClick(() { this.toggleTag(tag.id) }) }) } .padding({ left: 16, right: 16 }) .width(100%) Blank() // 底部已选展示 确认 Column({ space: 10 }) { if (this.selectedCount 0) { Column({ space: 6 }) { Text(已选) .fontSize(13) .fontColor(#888888) Text(this.selectedLabels) .fontSize(14) .fontColor(#1A1A1A) .maxLines(2) .textOverflow({ overflow: TextOverflow.Ellipsis }) } .alignItems(HorizontalAlign.Start) .padding({ left: 14, right: 14, top: 12, bottom: 12 }) .backgroundColor(#F5F5F5) .borderRadius(10) .width(100%) } Button(确认选择) .width(100%) .height(50) .fontSize(16) .fontWeight(FontWeight.Medium) .backgroundColor(this.selectedCount 3 ? #007DFF : #CCCCCC) .borderRadius(25) .enabled(this.selectedCount 3) } .padding({ left: 16, right: 16, bottom: 32 }) } .width(100%) .height(100%) .backgroundColor(#F5F6FA) } }代码里的几个细节看完完整代码后可以回头重点检查三处。第一处是数据声明。标签数据结构这类结构把页面需要的字段提前摆出来后面ForEach渲染时就不会到处临时拼数据。第二处是状态更新。selectedTags变化后相关 UI 会自动刷新这也是声明式 UI 写起来舒服的地方。你不用手动找某个控件改样式只要把状态描述清楚。第三处是容器嵌套。这个案例不是为了炫技才套Row、Column、Flex而是每一层都在解决具体排版问题。读代码时多问一句这一层容器负责什么如果答不上来它可能就该被简化。常见改造坑最容易踩的坑是把示例里的颜色、文案、尺寸都保留然后只替换数据。这样页面能跑但很难和自己的项目风格统一。另一个坑是过度依赖固定宽高。固定宽高在演示里很方便在真实设备上就未必稳。文本变长、屏幕变窄、系统字体变大都会把问题暴露出来。我一般会保留固定尺寸给图标、头像、按钮这类稳定元素文本区域、列表区域、内容卡片尽量交给弹性布局处理。写在最后这个案例的价值不只是“有一份完整代码”。更重要的是你能从里面看到 ArkUI 页面的一条基本思路数据先定义清楚状态单独管理布局按区域拆交互只改必要状态。按这个思路去写页面复杂一点也不会马上失控。