鸿蒙原生应用 ArkUI 实战技能交换首页的分类胶囊横滑与推荐列表App 38「校园技能交换」首页HomeTab主题色#2D9CDB青蓝cyan blue4 个 Tab 分别为首页、发布、交流、我的。首页采用Header 分类胶囊 Banner 热门技能四区布局——白色单行 Header技能交换22 号加粗CatRow 6 分类横滑胶囊全部/设计/编程/语言/音乐/运动State activeCat 单选选中青蓝底白字 渐变 Banner“你的技能可以交换” “已有 328 位同学在交换技能”SectionTitle热门技能 更多 4 条技能列表 PS 修图设计 设计系小美 精通 想学吉他 / Python 编程 计科阿强 熟练 想学英语口语 / 吉他弹唱 音乐社阿乐 精通 想学PS / ️ 英语口语 外院莉莉 母语级 想学编程每条含 52×52 浅青圆形头像 名称 精通/熟练标签 达人 想学 青蓝交换按钮。本篇基于38-skill-swap/entry/src/main/ets/pages/HomeTab.ets约 119 行逐段拆解附 4 张实机截图。一、整体结构四区Header 分类 Banner 技能布局App 38 首页是品牌头部 分类导航 宣传 Banner 热门技能的四区布局——6 个 Builder 块build() { Column() { this.Header() this.CatRow() Scroll() { Column({ space: 14 }) { this.Banner() this.SectionTitle(热门技能) this.SkillList() } .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) }4 块结构Header— 单行品牌头“技能交换”CatRow— 6 分类横滑胶囊固定区Banner— 渐变宣传卡SectionTitle(‘热门技能’) SkillList— 4 条技能与 App 37 首页对比App 37 是双行 Header 课程 Grid 热门资料、App 38 是单行 Header 分类胶囊 Banner 热门技能——“37 考试 vs 38 技能”——“37 课程 Grid vs 38 分类胶囊”——“37 浏览数 vs 38 交换按钮”——“两种校园平台首页”——“38 技能交换社区”——“首页 业务模式”。主题色#2D9CDB青蓝——“与 App 33 共享单车同色”——“双青蓝”青蓝 “技能/专业的蓝”技能证书/编程的蓝色青蓝 “社交/信任的蓝”社区/协作的蓝色青蓝 “共享/交换的蓝”共享经济蓝色系“双青蓝的区分”——App 33 是共享单车、App 38 是技能交换——“33 管骑车、38 管换技能”——“同一青蓝两业务”——“颜色复用的辨识”——“青蓝 共享平台”——“主题色的业务匹配”。CatRow()6 分类胶囊是 App 38 首页的特色——“分类导航”——“全部/设计/编程/语言/音乐/运动”——“6 大技能分类”——“点击筛选”——“技能分类体系”——“首页的导航”。SkillList()热门技能——“4 条技能”——“交换按钮”——“想学展示”——“技能达人的双向信息”——“交换 核心操作”。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header单行品牌头Header 是“技能交换”的单行头部Builder Header() { Column() { Text(技能交换).fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text) .width(100%).padding({ top: this.safeTop 10, left: D.pad, right: D.pad, bottom: 12 }) }.width(100%).backgroundColor(C.card) }Header 结构白色背景 单行标题技能交换22 号加粗黑——“单行品牌头”。Text(技能交换)22 号主标题——“品牌名”——“技能 交换”——“交换 双向”——“技能交换 平台业务”——“22 号 品牌头字号”——“同 App 33 校园骑行”——“单行简洁”。padding({ top: this.safeTop 10, bottom: 12 })安全区 底部间距——“系列标准”。与 App 37 双行 Header 对比——App 37 是双行 slogan、App 38 是单行——“双行 vs 单行”——“38 简洁”——“品牌名的直接”——“技能交换 一目了然”——“Header 形态 页面性质”。三、CatRow6 分类横滑胶囊本页特色CatRow 是6 个技能分类的横滑胶囊Builder CatRow() { Scroll() { Row({ space: 10 }) { ForEach(this.cats, (c: string, idx: number) { Text(c).fontSize(13) .fontColor(this.activeCat idx ? #FFFFFF : C.textSub) .padding({ left: 14, right: 14, top: 7, bottom: 7 }) .backgroundColor(this.activeCat idx ? C.primary : C.card).borderRadius(16) .onClick(() { this.activeCat idx; }) }, (c: string) c) } } .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width(100%) .padding({ left: D.pad, right: D.pad, top: 8, bottom: 8 }).backgroundColor(C.card) }CatRow 结构横向 Scroll Row10 间距 6 个胶囊 Text 白底——“分类导航胶囊”——“固定在 Header 下”——“不随滚动”——“分类常驻”。6 个分类全部/设计/编程/语言/音乐/运动——“6 大技能分类”——“全部 5 类”——“技能分类体系”——“设计的多样性”。State activeCat: number 0选中状态——“当前分类”——“默认全部”——“单选”——“State 状态管理”——“同系列胶囊”。fontColor(this.activeCat idx ? #FFFFFF : C.textSub)选中白字——“选中白、未选灰”——“颜色 选中”。backgroundColor(this.activeCat idx ? C.primary : C.card)选中青蓝底——“选中青蓝、未选白底”——“主题色 选中”——“青白对比”。borderRadius(16)16 圆角胶囊——“胶囊形”——“柔和”——“同系列胶囊”。onClick(() { this.activeCat idx; })点击切换——“点击换分类”——“状态驱动”——“单选切换”——“真实产品按分类过滤技能”。scrollable(ScrollDirection.Horizontal)横向滚动——“横滑”——“6 胶囊横排”——“可滚动”——“scrollBar Off”——“横滑分类”。padding({ top: 8, bottom: 8 }).backgroundColor(C.card)白底固定区——“分类区白底”——“与内容区区分”——“固定不滚动”——“分类常驻”。与 App 37 资料课程胶囊对比——App 37 是4 门课、App 38 是6 分类——“4 vs 6 胶囊”——“课程 vs 技能分类”——“横滑胶囊范式”——“分类的多样”。与 App 34/36 胶囊对比——系列多个 App 用胶囊——“系列胶囊统一”——“分类导航的通用”——“6 分类的丰富”。四、Banner 渐变宣传卡Banner 是“你的技能可以交换”的青蓝渐变宣传卡Builder Banner() { Row({ space: 12 }) { Text().fontSize(38) Column({ space: 4 }) { Text(你的技能可以交换).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(已有 328 位同学在交换技能).fontSize(12).fontColor(#FFFFFF).opacity(0.9) }.alignItems(HorizontalAlign.Start).layoutWeight(1) } .width(100%).padding(18).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }Banner 结构Row12 间距 左 38 号 右文字区16 号加粗标题 12 号副标题 18 padding 青蓝渐变 20 圆角——“技能交换宣传卡”。Text()38 号握手 emoji——“交换符号”——“ 握手/交换”——“技能的视觉”——“大号 emoji”。Text(你的技能可以交换)16 号加粗白——“宣传主题”——“你的技能 人人有技能”——“可以交换 平台价值”——“技能交换的理念”——“宣传文案”。Text(已有 328 位同学在交换技能)12 号白 0.9 副标题——“用户数据”——“328 位 社区活跃”——“已有 从众”——“社交证明”——“数字背书”。linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })青蓝渐变——“#2D9CDB → #69B7E8”——“135° 渐变”——“系列渐变统一”——“同 App 33 共享单车”。“你的技能可以交换” 的理念——“人人有技能”——“技能互通”——“交换 双赢”——“技能交换的价值主张”——“宣传的核心”。“328 位同学” 的社交证明——“社区规模”——“从众心理”——“大家都在换”——“数字 信任”——“Banner 的转化”。五、SectionTitle热门技能Builder SectionTitle(title: string) { Row() { Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(更多 ).fontSize(12).fontColor(C.textDim) }.width(100%) }SectionTitle 结构标题左 “更多 ” 右——“热门技能 更多 ”——“更多 查看全部”——“同 App 35/36/37”——“系列 SectionTitle”。六、SkillList热门技能列表本页核心SkillList 是4 条技能的列表——每条含圆形头像、名称 等级标签、达人、想学、交换按钮Builder SkillList() { Column({ space: 12 }) { ForEach(this.skills, (s: Skill) { Row({ space: 12 }) { Row() { Text(s.emoji).fontSize(28) } .width(52).height(52).backgroundColor(C.primarySoft).borderRadius(26).justifyContent(FlexAlign.Center) Column({ space: 5 }) { Row({ space: 6 }) { Text(s.name).fontSize(15).fontWeight(FontWeight.Medium).fontColor(C.text) Text(s.level).fontSize(10).fontColor(C.primary) .padding({ left: 6, right: 6, top: 1, bottom: 1 }).backgroundColor(C.primarySoft).borderRadius(4) } Text(s.master).fontSize(12).fontColor(C.textDim) Text( s.wants).fontSize(11).fontColor(C.accent) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(交换).fontSize(12).fontColor(#FFFFFF) .padding({ left: 14, right: 14, top: 7, bottom: 7 }).backgroundColor(C.primary).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: 申请交换: s.name }); }) } .width(100%).padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (s: Skill) s.id.toString()) }.width(100%) }每条技能卡的结构左 52×52 浅青圆形头像28 号 ️borderRadius 26 圆形中 文字区名称 15 号 精通标签 达人 12 号 想学 11 号右 青蓝交换按钮4 条技能每条 6 要素emoji技能达人等级想学PS 修图设计设计系小美精通想学吉他Python 编程计科阿强熟练想学英语口语吉他弹唱音乐社阿乐精通想学PS️英语口语外院莉莉母语级想学编程Row().width(52).height(52).backgroundColor(C.primarySoft).borderRadius(26)52×52 浅青圆形头像——“borderRadius 26 正圆”——“圆形头像”——“28 号 emoji 居中”——“浅青底”——“技能的视觉标识”——“同系列圆形头像”——“比方形更柔和”。Text(s.name).fontSize(15)15 号技能名——“PS 修图设计”——“技能名称”——“15 号 Medium”——“技能标题”。Text(s.level)精通/熟练标签——“10 号青字”——“浅青底”——“4 圆角”——“等级 tag”——“精通/熟练/母语级”——“等级标识”——“专业程度”。Text(s.master)12 号灰达人——“设计系小美”——“技能达人”——“学院 昵称”——“创作者”——“达人 信任”。Text( s.wants)11 号青蓝想学——“ 想学吉他”——“交换需求”——“想学 双向”——“交换的条件”——“青蓝色 accent”——“技能交换的核心”。Text(交换)青蓝交换按钮——“白字青蓝底”——“1414 padding”——“10 圆角”——“行动按钮”——“交换 核心操作”——“申请交换”。onClick(() promptAction.showToast({ message: 申请交换: s.name }))交换反馈——“申请交换: PS 修图设计”——“Toast 反馈”——“占位申请”——“真实产品发交换请求”。“想学” 的双向设计——“我教你的 我想学的”——“双向技能”——“交换 双向匹配”——“想学 交换条件”——“技能交换的核心逻辑”——“双向信息完整”。Skill 模型6 字段interface Skill { id: number; emoji: string; name: string; master: string; level: string; wants: string; }6 字段id/emoji/name/master/level/wants——“技能实体”——“名称/达人/等级/想学”——“完整建模”——“wants 交换需求”——“双向技能”。4 技能的双向匹配——“小美想学吉他阿乐会吉他”——“阿强想学英语莉莉会英语”——“技能供需匹配”——“交换的闭环”——“demo 数据自洽”——“技能生态”。七、总结青蓝 分类 Banner 技能交换App 38 首页一句话用青蓝#2D9CDB组织一个分类 宣传 技能交换的社区首页——单行 Header 用技能交换点明业务6 分类横滑胶囊提供技能筛选 渐变 Banner 用你的技能可以交换 328 位同学宣传平台价值热门技能列表用圆形头像 精通标签 想学 交换按钮展示技能达人的双向信息。3 个设计亮点6 分类胶囊——全部/设计/编程/语言/音乐/运动横滑导航 交换 Banner——你的技能可以交换 328 位同学社交证明双向技能信息——想学 交换按钮的供需匹配主题色设计逻辑青蓝 技能/信任/共享——“技能交换 App 用青蓝与共享单车33同色系强化共享平台认知”——“双青蓝的业务区分”。与系列呼应单行 Header33、横滑胶囊31/34/36/37、渐变 Banner32-37、SectionTitle系列、ForEach 列表系列、圆形头像37、按钮系列——“38 把系列的 Header/胶囊/Banner/列表手法组合出’技能交换’场景”。体验细节分类导航、等级标签、双向想学、交换按钮——“首页的核心 让用户’3 秒选分类 5 秒申请交换’”。可扩展性展望真实技能数据、分类过滤、交换请求、聊天联动、评价体系、搜索——“demo 的技能交换首页骨架完整”。八、扩展思考首页的转化路径与设计哲学7.1 首页的交换转化路径完整交换漏斗进入首页 → 选分类6 胶囊→ 看热门技能等级/想学→ 点交换按钮 → 申请交换 → 进交流聊天“首页的转化路径”——分类胶囊是筛选入口、技能列表是供需展示、交换按钮是行动入口——“3 个转化节点”——“从筛选到交换”——“首页的交换转化链”。7.2 首页的信息架构4 层信息L1 品牌Header——“技能交换”L2 分类CatRow——“什么技能”L3 宣传Banner——“交换的价值”L4 内容SkillList——“谁在交换”“4 层渐进式”——“从品牌到分类到宣传到内容”——“信息的金字塔”——用户按需深入——“渐进式信息披露”。7.3 首页的业务建模Skill 模型 6 字段id/emoji/name/master/level/wants——“6 字段建模”——“技能的核心字段”——“最小可用集”——加评分rating、加交换次数count即可扩展——“数据模型的扩展点”。7.4 首页的对比与统一统一4 技能同结构头像/名称/等级/达人/想学/交换——“列表项的统一”。对比4 技能数据不同技能/达人/等级/想学——“差异在数据”——“结构同构 数据异构”。7.5 首页的设计哲学首页的 3 个设计哲学分类优先——6 分类胶囊筛选双向优先——技能 想学双信息行动优先——交换按钮直达“分类 双向 行动的首页”——“技能社区首页的设计原则”——“从哲学看设计”——“这套方法论可直接迁移到任何技能/服务交换类 App”。7.7 首页的终评App 38 首页综合评估——“四区结构 青蓝主题 完整交换链”——“首页的完成度评级”——“一个可上线级的技能交换首页”——“系列社区首页的标杆”——“demo 的高完成度”。九、彩蛋首页的细节设计8.1 “328 位同学” 的社交证明“已有 328 位同学”——“社区规模”——“从众心理”——“数字 信任”——“社交证明”——“Banner 的转化”——“社区活跃度”。8.2 “你的技能” 的普惠“你的技能”——“人人有技能”——“技能普惠”——“人人可交换”——“低门槛”——“宣传的包容”——“技能的价值”。8.3 等级标签的精通/熟练精通/熟练/母语级——“3 级等级”——“专业程度”——“等级 信任”——“水平标识”——“技能的质量”——“等级体系”。8.4 圆形头像的柔和52×52 正圆——“borderRadius 26”——“圆形头像”——“柔和”——“社交感”——“圆形 人物”——“头像的视觉”。8.5 的交换符号“ 交换”——“循环箭头”——“互换”——“双向”——“交换的视觉”——“emoji 语义”——“想学的标识”。8.6 6 分类的完整设计/编程/语言/音乐/运动 全部——“6 大分类”——“技能分类完整”——“覆盖主要技能”——“分类体系”——“技能的多维”。8.7 交换按钮的青蓝底白字青蓝底——“交换 主操作”——“主题色按钮”——“行动召唤”——“高对比”——“按钮的突出”——“交换的转化”。8.8 首页的demo 价值分类 宣传 技能 完整首页——“可筛选可交换”——“社区演示”——“首页模板”——“技能社区沉淀”。8.9 首页的技能场景“用技能换技能”——“学生场景”——“技能互换”——“学习新技能”——“场景驱动”——“技能交换的价值”。8.10 首页的社区闭环首页选技能 → 申请交换 → 交流聊天 → 完成交换 → 评价——“社区完整闭环”——“从发现到完成”——“技能交换全流程”——“社区的价值”。8.11 首页的母语级等级英语口语母语级——“最高等级”——“母语 专家”——“等级差异”——“等级体系完整”——“用户选最高”——“等级的多样性”。8.12 首页的学院昵称设计系/计科/音乐社/外院——“4 个学院背景”——“技能出处”——“专业背景”——“达人 专业”——“昵称的真实”——“技能的可信”。8.13 首页的横向滚动分类6 分类横滑——“手指横移”——“分类切换”——“横向浏览”——“滚动引导”——“移动端惯例”——“分类的便捷”。8.14 首页的交换按钮位置右侧独立按钮——“右对齐”——“拇指区”——“一键交换”——“按钮易达”——“操作便捷”——“交换的转化”。补充说明本篇所有代码引用均基于38-skill-swap/entry/src/main/ets/pages/HomeTab.ets实际源码行号与源码一一对应4 张实机截图分别覆盖首页首屏、设计分类切换、PS 修图交换按钮点击、吉他弹唱交换按钮点击四种差异场景全部含模拟器轮廓图床域名统一为imgbed.devzoo.top。4 条技能的双向供需小美想学吉他↔阿乐会吉他、阿强想学英语↔莉莉会英语构成完整的技能交换匹配闭环。十、首页交互细节与可用性分析9.1 分类筛选的价值6 分类胶囊——“技能筛选”——“按类找技能”——“点击切换”——“分类导航”——“技能分类体系”——“筛选效率”——“同系列胶囊”。9.2 双向技能的交换匹配技能 想学——“双向信息”——“我能教 我想学”——“交换匹配”——“供需对应”——“双向 交换条件”——“技能交换的核心”。9.3 等级标签的质量信任精通/熟练/母语级——“等级 质量”——“专业程度”——“信任背书”——“用户选精通”——“等级的转化”——“技能的质量体系”。9.4 交换按钮的转化青蓝交换按钮——“申请交换”——“一键发起”——“交换转化”——“行动召唤”——“交换 核心操作”——“社区的行动”。9.5 分类固定区的常驻CatRow 不随滚动——“分类常驻”——“固定导航”——“随时切换”——“分类便捷”——“固定区设计”——“浏览效率”。9.6 达人身份的信任设计系小美/计科阿强——“达人 身份”——“学院 昵称”——“专业背景”——“达人信任”——“技能提供者”——“信任的建立”。9.7 社区活跃的数据328 位同学——“社区规模”——“活跃度”——“生态健康”——“大家都在用”——“社区的信任”——“数字的转化”。9.8 与交流 Tab 的联动首页申请交换 → 交流聊天——“跨页协同”——“申请到聊天”——“交换闭环”——“数据关联”——“跨页一致”。9.9 色彩一致性的品牌青蓝贯穿——“胶囊选中 Banner 交换按钮”——“品牌记忆”——“青蓝 技能交换”——“主题色辨识”——“色彩品牌”。9.10 供需匹配的自洽小美想学吉他 ↔ 阿乐会吉他——“供需匹配”——“技能互补”——“交换闭环”——“demo 数据自洽”——“技能生态完整”。9.11 emoji 体系的丰富️——“7 个 emoji”——“Tab/交换/4 技能/想学”——“emoji 视觉”——“低成本”——“emoji 的丰富”。9.12 最终设计评价分类 宣传 技能 交换 完整社区首页——“从结构到信息到行动的完整”——“可上线级”——“系列社区首页标杆”——“首页完成度评级”——“验收达标”。首页的分类胶囊、推荐横幅与热门技能列表共同构成了技能交换的发现入口读者可对照源码与配图逐一验证。