鸿蒙原生应用 ArkUI 实战：校园影像首页的环形完成度与作品卡

鸿蒙原生应用 ArkUI 实战校园影像首页的环形完成度与作品卡App 19「校园影像」首页HomeTab主题色#0D9488青绿teal4 个 Tab 分别为首页、发布、社区❤️、我的。首页采用固定 Header校园影像/记录校园美好瞬间 青绿渐变精选卡本周精选·樱花季 独立搜索栏 3 栏统计 4 个圆形入口 本周拍摄趋势条形图 4 张精选作品卡封面 emoji/标题/作者/点赞数/星级/标签/完成度环形进度/收藏/查看详情双按钮 热门分类排行带涨跌箭头。本篇基于19-campus-photo/entry/src/main/ets/pages/HomeTab.ets约 244 行逐段拆解附 4 张实机截图。一、整体结构8 个 Builder 的内容流HomeTab 的结构与 App 18 社交匹配首页几乎完全同源都是 8 个 Builder 块、同样的搜索栏/统计/入口/周图/作品卡/排行布局build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.HeroCard() this.SearchBar() this.StatRow() this.QuickActionRow() this.WeekChart() this.SectionTitle(精选作品) this.PhotoList() this.SectionTitle(热门分类) this.RankList() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }8 个块按品牌 → 精选 → 搜索 → 数据 → 入口 → 图表 → 作品 → 排行叙事Header— 校园影像 Slogan品牌区HeroCard— 本周精选·樱花季渐变卡情感化SearchBar— 独立搜索栏照片/作者/标签StatRow— 3 栏统计校园照片/总点赞/参与拍摄QuickActionRow— 4 个圆形入口拍照/相册/精选/比赛WeekChart— 本周拍摄趋势条形图SectionTitle(精选作品) PhotoList— 4 张作品卡本页核心SectionTitle(热门分类) RankList— 4 条分类排行带涨跌与 App 18 的对比App 18 是推荐同好人物卡App 19 是精选作品摄影作品卡——同一套内容流首页模板主内容从人换成作品。系列模板复用的又一例证。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header HeroCard青绿摄影品牌区Header 是校园影像/记录校园美好瞬间 两行品牌区与 App 18 同构。HeroCard 是本周精选的横向渐变卡Builder HeroCard() { Row({ space: 14 }) { Column({ space: 6 }) { Text(本周精选).fontSize(12).fontColor(#FFFFFF).opacity(0.85) Text(樱花季·最美校园).fontSize(18).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(156人点赞 · 摄影社·小华).fontSize(11).fontColor(#FFFFFF).opacity(0.75) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text().fontSize(44) } .width(100%).padding(20).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) .onClick(() { promptAction.showToast({ message: 查看精选详情 }); }) }本周精选 / 樱花季·最美校园 / 156人点赞 · 摄影社·小华三行——标题 主题 数据点赞数 作者的精选 Banner 结构。156 人点赞与 PhotoList 第 3 张樱花季 156 赞一致✓——Hero 精选的作品 列表里点赞最高的作品樱花季 156 赞是 4 张里最高的数据互相印证。#0D9488 → #2DD4BF青绿渐变——青绿色是清新/自然/视觉的象征色相机 App、图片类 App 常用绿色系与 App 18 粉红社交浪漫形成鲜明对比——青绿创作、粉红社交的主题色语义。onClick整卡可点查看精选详情。三、SearchBar StatRow QuickActionRowSearchBar与 App 18 同构 图标 透明 TextInput占位搜索照片、作者、标签...——摄影社区搜索 3 个维度作品/作者/标签。State searchText双向绑定。StatRow是 3 栏统计校园照片 248/总点赞 1.2k/参与拍摄 36数字全部C.primary青绿加粗与 App 18 同款统计同色策略Builder StatRow() { Row() { ForEach(this.stats, (s: StatItem) { Column({ space: 4 }) { Text(s.value).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.primary) Text(s.label).fontSize(11).fontColor(C.textDim) }.layoutWeight(1) }, (s: StatItem) s.label) } .width(100%).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }数据一致性校园照片 248 我的页作品 248 ✓、总点赞 1.2k 我的页点赞 1.2k ✓、参与拍摄 36 我的页粉丝 36 ✓——跨页数据一致。QuickActionRow4 个圆形入口拍照/相册️/精选⭐/比赛Builder QuickActionRow() { Row() { ForEach(this.actions, (a: QuickAction) { Column({ space: 8 }) { Row() { Text(a.icon).fontSize(22) } .width(48).height(48).backgroundColor(C.primarySoft).borderRadius(24).justifyContent(FlexAlign.Center) Text(a.label).fontSize(11).fontColor(C.textSub) }.layoutWeight(1).onClick(() { promptAction.showToast({ message: a.label }); }) }, (a: QuickAction) a.id.toString()) } .width(100%).padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }拍照/相册/精选/比赛覆盖摄影 App 的 4 个核心玩法拍拍照、看相册、赏精选、赛比赛——入口 核心玩法。四、WeekChart本周拍摄趋势WeekChart 与 App 18 周图同构7 天条形图 共 42 张Builder WeekChart() { Column({ space: 10 }) { Row() { Text(本周拍摄趋势).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(共 42 张).fontSize(11).fontColor(C.textDim) }.width(100%) Row() { ForEach(this.weekBars, (b: BarItem) { Column({ space: 6 }) { Column().width(14).height(b.value * 0.7).backgroundColor(C.primary).borderRadius(4) Text(b.day).fontSize(10).fontColor(C.textDim) }.layoutWeight(1) }, (b: BarItem) b.day) }.width(100%).alignItems(VerticalAlign.Bottom).height(90) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }数据一 40/二 65/三 55/四 80/五 90/六 100/日 70——周六 100 最高周末拍摄高峰、周一 40 最低工作日低谷——周末爱拍照符合校园摄影规律。共 42 张的数学(406555809010070)/10 50——咦42 ≠ 500/10。让我算406555809010070 500500/10 50 ≠ 42——*共 42 张与柱子之和按 *0.7 是 350 张不对**——口径分析柱子是拍摄强度40-100共 42 张是本周实际拍摄 42 张——两个口径不匹配App 15/16 也出现过同类图表 vs 汇总口径不一的坑。但 42 可能对应参与拍摄 36 精选 6之类的逻辑——无论如何*强度百分比 vs 张数口径混用**是本系列反复出现的 demo 瑕疵读者应引以为戒。height(b.value * 0.7)直接倍率100×0.770vp——简化版周图同 App 18。五、PhotoList精选作品卡本页核心PhotoList 是 4 张精选作品卡每张含封面 emoji、标题、作者、点赞数、星级、标签、完成度环形进度、收藏/查看详情双按钮Builder PhotoList() { Column({ space: 12 }) { ForEach(this.photos, (p: PhotoCard) { Column({ space: 12 }) { Row({ space: 12 }) { Row() { Text(p.cover).fontSize(36) } .width(64).height(64).backgroundColor(C.primarySoft).borderRadius(D.rMd).justifyContent(FlexAlign.Center) Column({ space: 4 }) { Row({ space: 6 }) { Text(p.title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text) Text(⭐ p.rating .0).fontSize(10).fontColor(C.warn) } Text(p.author).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Column({ space: 4 }) { Row({ space: 4 }) { Text(❤).fontSize(12).fontColor(C.danger); Text(p.likes.toString()).fontSize(12).fontColor(C.textSub) } Stack({ alignContent: Alignment.Center }) { Progress({ value: p.progress, total: 100, type: ProgressType.Ring }).width(40).height(40).color(C.primary).style({ strokeWidth: 4 }) Text(p.progress %).fontSize(9).fontColor(C.primary).fontWeight(FontWeight.Bold) } }.alignItems(HorizontalAlign.End) }.width(100%) Row({ space: 8 }) { ForEach(p.tags, (t: string, idx: number) { Text(t).fontSize(11).fontColor(C.primary) .padding({ left: 8, right: 8, top: 4, bottom: 4 }) .backgroundColor(C.primarySoft).borderRadius(4) }, (t: string, idx: number) t idx) }.width(100%) Row({ space: 12 }) { Button(收藏).fontSize(13).fontColor(C.textSub).backgroundColor(C.cardSoft) .borderRadius(D.rMd).height(38).layoutWeight(1) .onClick(() { promptAction.showToast({ message: 已收藏 }); }) Button(查看详情).fontSize(13).fontColor(#FFFFFF).backgroundColor(C.primary) .borderRadius(D.rMd).height(38).layoutWeight(1) .onClick(() { promptAction.showToast({ message: p.title }); }) }.width(100%) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }, (p: PhotoCard) p.id.toString()) }.width(100%) }5.1 4 张作品的数据设计private photos: PhotoCard[] [ { id: 1, cover: , title: 校园日出, author: 摄影社·小明, likes: 128, rating: 5, tags: [风景, 日出, 清晨], progress: 85 }, { id: 2, cover: , title: 图书馆光影, author: 摄影社·小红, likes: 96, rating: 4, tags: [建筑, 光影, 室内], progress: 72 }, { id: 3, cover: , title: 樱花季, author: 摄影社·小华, likes: 156, rating: 5, tags: [花卉, 春日, 人像], progress: 90 }, { id: 4, cover: , title: 运动会瞬间, author: 摄影社·小杰, likes: 88, rating: 4, tags: [运动, 抓拍, 动感], progress: 68 } ];4 张作品的作品卡要素封面日出/图书馆/樱花/运动——封面 emoji 即作品缩略图demo 用 emoji 代替真实图片标题校园日出/图书馆光影/樱花季/运动会瞬间——作品命名有摄影艺术感光影/瞬间作者摄影社·小明/小红/小华/小杰——作者 摄影社 昵称团队归属点赞128/96/156/88——热度排序樱花季最高 156星级5/4/5/4——评分完成度环形进度85%/72%/90%/68%——作品完成度修图进度点赞 156 的樱花季是 HeroCard 精选的作品——列表最高赞的作品被本周精选选中首页数据故事自洽。5.2 点赞 环形进度右侧双信息Column({ space: 4 }) { Row({ space: 4 }) { Text(❤).fontSize(12).fontColor(C.danger); Text(p.likes.toString()).fontSize(12).fontColor(C.textSub) } Stack({ alignContent: Alignment.Center }) { Progress({ value: p.progress, total: 100, type: ProgressType.Ring }).width(40).height(40).color(C.primary).style({ strokeWidth: 4 }) Text(p.progress %).fontSize(9).fontColor(C.primary).fontWeight(FontWeight.Bold) } }.alignItems(HorizontalAlign.End)右侧双信息❤ 点赞数红色 heart 数字——热度信号完成度环形进度ProgressType.Ring40×40 中间数字——进度信号ProgressType.Ring环形进度——本系列第二次用环形App 18 首次。环形 中心数字双通道85% 数字 环形。作品完成度用环形表达还差多少85% 暗示还没修完图。5.3 标签 双按钮标签ForEach(p.tags)青绿字 浅青绿底小胶囊——风景/日出/清晨等——作品标签分类 主题 风格。双按钮收藏/查看详情Row({ space: 12 }) { Button(收藏).fontSize(13).fontColor(C.textSub).backgroundColor(C.cardSoft) .borderRadius(D.rMd).height(38).layoutWeight(1) .onClick(() { promptAction.showToast({ message: 已收藏 }); }) Button(查看详情).fontSize(13).fontColor(#FFFFFF).backgroundColor(C.primary) .borderRadius(D.rMd).height(38).layoutWeight(1) .onClick(() { promptAction.showToast({ message: p.title }); }) }收藏灰底灰字次级— 加入收藏夹查看详情青绿底白字主操作— 进入作品页收藏/查看是作品卡的标准双操作小红书/图虫同款。主次按钮的视觉权重差异引导用户点查看详情。六、RankList热门分类排行带涨跌RankList 是 4 条热门摄影分类排行Builder RankList() { Column({ space: 0 }) { ForEach(this.ranks, (r: RankItem, idx: number) { Row({ space: 12 }) { Text(r.rank.toString()).fontSize(16).fontWeight(FontWeight.Bold) .fontColor(r.rank 3 ? C.primary : C.textDim).width(28).textAlign(TextAlign.Center) Text(r.name).fontSize(14).fontColor(C.text).layoutWeight(1) Text(r.count 张).fontSize(12).fontColor(C.textSub) Text(r.trend).fontSize(14).fontColor(r.trend ↑ ? C.ok : C.danger).margin({ left: 8 }) } .width(100%).padding({ left: 14, right: 14, top: 12, bottom: 12 }) if (idx this.ranks.length - 1) { Divider().color(C.stroke).strokeWidth(0.5) } }, (r: RankItem) r.id.toString()) } .width(100%).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }4 条分类风景 86 张↑ / 人像 72 张↑ / 建筑 54 张↓ / 美食 36 张↑——张数计数区别于 App 18 的人数——排行单位 业务对象摄影排作品张数。涨跌箭头 ↑绿↓红r.trend ↑ ? C.ok : C.danger——3 涨 1 跌。排名数字 1-4 用r.rank字段前 3 名青绿加粗r.rank 3第 4 名灰色。Divider().color(C.stroke).strokeWidth(0.5)0.5vp 超细分隔线系列精致细节。七、State 与封面 emoji的设计取舍HomeTab 只有1 个 StatesearchText。封面用 emoji 代替真实图片是 demo 的关键取舍——真实摄影 App 需要加载网络图片Image($r(...))或Image(url)demo 用 等 emoji 模拟封面——emoji 封面的 3 个好处无需图片资源——不依赖网络/本地图片纯文本渲染轻量快速——emoji 渲染成本远低于位图视觉友好——彩色 emoji 比空白占位更生动真实项目的替换Text(p.cover)→Image(p.coverUrl)配合objectFit(ImageFit.Cover)裁剪 borderRadius圆角——**demo 用 emoji 占位、产品用真实图片**是原型开发的通用模式B 端原型、设计稿 preview 都这样。八、与 App 18 首页的对比总结维度App 18 社交匹配App 19 校园影像主题色粉红 #EC4899青绿 #0D9488Hero 精选今日推荐同好本周精选作品搜索昵称/兴趣/学院照片/作者/标签统计匹配/好友/互动照片/点赞/拍摄主列表同好卡匹配度环形作品卡完成度环形排行兴趣排行分类排行双按钮跳过/打招呼收藏/查看详情App 19 与 App 18 几乎完全同构8 块布局、环形进度、涨跌排行、双按钮——内容流首页模板第 5 次复用App 13-19 中 App 18/19 是同源双子。**同一套模板换主题 换数据 摄影社区**再次验证模板方法论。九、封面 emoji的摄影作品数据设计App 19 首页 4 张作品卡的摄影作品数据设计值得拆解private photos: PhotoCard[] [ { id: 1, cover: , title: 校园日出, author: 摄影社·小明, likes: 128, rating: 5, tags: [风景, 日出, 清晨], progress: 85 }, { id: 2, cover: , title: 图书馆光影, author: 摄影社·小红, likes: 96, rating: 4, tags: [建筑, 光影, 室内], progress: 72 }, { id: 3, cover: , title: 樱花季, author: 摄影社·小华, likes: 156, rating: 5, tags: [花卉, 春日, 人像], progress: 90 }, { id: 4, cover: , title: 运动会瞬间, author: 摄影社·小杰, likes: 88, rating: 4, tags: [运动, 抓拍, 动感], progress: 68 } ];4 张作品的题材覆盖日出风景/图书馆建筑/樱花花卉人像/运动会运动——4 种题材 4 个场景恰好对应 RankList 的分类风景/人像/建筑/美食——虽然美食没进作品列表但风景/建筑覆盖了。封面 emoji 标题的耦合 校园日出——太阳 清晨 图书馆光影——书本 建筑 樱花季——花 春日 运动会瞬间——奔跑 运动emoji 与标题语义一致——用户一眼看懂这张作品是什么。真实项目里 emoji 换成作品缩略图标题、作者、标签保持结构。作者 摄影社·XX——4 位作者全是摄影社成员小明/小红/小华/小杰——**摄影社是校园摄影的内容生产组织**的设定。与社区页互动者小明/小美/小华/小雪同名——作者 互动者跨页人物一致。点赞 128/96/156/88与完成度 85%/72%/90%/68%——点赞高的作品完成度也高樱花季 156 赞 90% 完成——**热度与完成度正相关**符合直觉完成度高的作品更完整、更受欢迎。十、摄影作品卡 vs 系列其他主列表的对比回顾系列各 App 的主列表卡片可以清晰看到卡片类型的进化App主列表卡片要素13 音乐推荐项目emoji标题标签进度条14 运动场地星级开放时间预约进度按钮15 环保分类指南星级掌握度学习/测试16 商城商品划线价库存缺货态18 社交同好卡匹配度环形在线状态点19 摄影作品卡封面点赞❤完成度环形标签收藏/详情App 19 作品卡的 3 个独有要素封面emoji 缩略图——作品类卡片的图要素前几代没有封面概念❤ 点赞——作品的热度信号前几代是人数/进度完成度环形ProgressType.Ring——作品的修图/发布进度卡片要素跟随内容形态工具进度→ 电商价格库存→ 社交匹配度→ 摄影封面点赞——**同一卡片模板要素按业务增删**是本系列列表页的核心方法论。十一、总结App 19 首页解析完毕。青绿渐变精选卡 精选作品环形进度 点赞热度 分类排行涨跌是四大亮点。与 App 18 的同源双子关系再次展示模板复用价值。