鸿蒙原生应用 ArkUI 实战：技能交换首页的分类胶囊横滑与推荐列表

App 38「校园技能交换」首页（HomeTab），主题色 #2D9CDB 青蓝（cyan blue），4 个 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 块结构：

1. Header — 单行品牌头（“技能交换”）
2. CatRow — 6 分类横滑胶囊（固定区）
3. Banner — 🤝 渐变宣传卡
4. 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 形态 = 页面性质”。

三、CatRow：6 分类横滑胶囊（本页特色）

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 + Row（10 间距）+ 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 结构：Row（12 间距）+ 左 🤝 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('交换') 青蓝交换按钮——“白字青蓝底”——“14+14 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 个设计亮点：

1. 6 分类胶囊——全部/设计/编程/语言/音乐/运动横滑导航
2. 🤝 交换 Banner——"你的技能可以交换 + 328 位同学"社交证明
3. 双向技能信息——🔄想学 + 交换按钮的供需匹配

主题色设计逻辑：青蓝 = 技能/信任/共享——“技能交换 App 用青蓝，与共享单车（33）同色系，强化共享平台认知”——“双青蓝的业务区分”。

与系列呼应：单行 Header（33）、横滑胶囊（31/34/36/37）、渐变 Banner（32-37）、SectionTitle（系列）、ForEach 列表（系列）、圆形头像（37）、按钮（系列）——“38 把系列的 Header/胶囊/Banner/列表手法组合出’技能交换’场景”。

体验细节：分类导航、等级标签、双向想学、交换按钮——“首页的核心 = 让用户’3 秒选分类 + 5 秒申请交换’”。

可扩展性展望：真实技能数据、分类过滤、交换请求、聊天联动、评价体系、搜索——“demo 的技能交换首页骨架完整”。

八、扩展思考：首页的转化路径与设计哲学

7.1 首页的"交换转化路径"

完整交换漏斗：

进入首页 → 选分类（6 胶囊）→ 看热门技能（等级/想学）→ 点交换按钮 → 申请交换 → 进交流聊天

“首页的转化路径”——分类胶囊是"筛选入口"、技能列表是"供需展示"、交换按钮是"行动入口"——“3 个转化节点”——“从筛选到交换”——“首页的交换转化链”。

7.2 首页的"信息架构"

4 层信息：

1. L1 品牌（Header）——“技能交换”
2. L2 分类（CatRow）——“什么技能”
3. L3 宣传（Banner）——“交换的价值”
4. L4 内容（SkillList）——“谁在交换”

“4 层渐进式”——“从品牌到分类到宣传到内容”——“信息的金字塔”——用户按需深入——“渐进式信息披露”。

7.3 首页的"业务建模"

Skill 模型 6 字段（id/emoji/name/master/level/wants）——“6 字段建模”——“技能的核心字段”——“最小可用集”——加评分（rating）、加交换次数（count）即可扩展——“数据模型的扩展点”。

7.4 首页的"对比与统一"

统一：4 技能同结构（头像/名称/等级/达人/想学/交换）——“列表项的统一”。
对比：4 技能数据不同（技能/达人/等级/想学）——“差异在数据”——“结构同构 + 数据异构”。

7.5 首页的"设计哲学"

首页的 3 个设计哲学：

1. 分类优先——6 分类胶囊筛选
2. 双向优先——技能 + 想学双信息
3. 行动优先——交换按钮直达

“分类 + 双向 + 行动的首页”——“技能社区首页的设计原则”——“从哲学看设计”——“这套方法论可直接迁移到任何技能/服务交换类 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 最终设计评价

分类 + 宣传 + 技能 + 交换 = 完整社区首页——“从结构到信息到行动的完整”——“可上线级”——“系列社区首页标杆”——“首页完成度评级”——“验收达标”。

首页的分类胶囊、推荐横幅与热门技能列表共同构成了技能交换的发现入口，读者可对照源码与配图逐一验证。