鸿蒙原生应用 ArkUI 实战：课本共享首页的搜索 Header 与 2 列 Grid

App 36「校园课本共享」首页（HomeTab），主题色 #F2994A 琥珀橙（amber），4 个 Tab 分别为首页（📚）、商品（📖）、发布（📤）、我的（👤）。首页采用"搜索 Header + Banner + 低价好书"三区布局——白色 Header（搜索框"搜索教材名称..."+ 📚 24 号，40 高圆角） + 琥珀橙渐变 Banner（"二手教材 低至 2 折" + "毕业季甩卖，先到先得" + 📖 38 号） + SectionTitle（低价好书 + 全部 >）+ 2 列 6 书 Grid（📕 高等数学第七版上册 ¥15 划线¥42 九成新 / 📗 大学英语 1 ¥12 划线¥38 八成新 / 📘 数据结构C语言版 ¥20 划线¥45 九五成新 / 📙 线性代数同济版 ¥8 划线¥26 七成新 / 📓 大学物理学上 ¥16 划线¥40 九成新 / 📔 概率论与数理统计 ¥14 划线¥35 八成新，每本含 emoji 图块 + 两行标题 + 成色绿字 + 现价琥珀橙 + 划线原价）。本篇基于 36-book-share/entry/src/main/ets/pages/HomeTab.ets（约 105 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"搜索 + Banner + 好书"布局

App 36 首页是"搜索引导 + 促销宣传 + 二手课本"的三区布局——5 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.Banner()
        this.SectionTitle('低价好书')
        this.BookGrid()
      }
      .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)
}

3 块结构：

1. Header — 搜索框 + 📚 图标
2. Banner — 琥珀橙渐变促销卡
3. SectionTitle('低价好书') + BookGrid — 2 列 6 书网格

与 App 35 首页对比：App 35 是"双行 Header + 课程横滑 + 热门笔记"、App 36 是"搜索 Header + 促销 Banner + 低价书 Grid"——"35 笔记社区 vs 36 二手交易"——"35 内容推荐、36 商品交易"——"35 分享笔记、36 卖二手书"——"两种学习平台首页"——"36 = 电商首页"——"首页 = 业务模式"。

主题色 #F2994A 琥珀橙——"二手交易的橙色系"：

• 琥珀橙 = "旧书/纸张的暖色"（旧书的泛黄联想）
• 琥珀橙 = "二手/折扣的橙色"（促销/打折常用）
• 琥珀橙 = "橙子/活力的橙"（交易的活力）

"琥珀橙 vs App 29 深橙（#E85D04）"——App 29 是"食堂"深橙、App 36 是"课本"琥珀橙——"两种橙"——"29 管吃饭、36 管卖书"——"橙色系的交易联想"——"折扣 = 橙色"——"主题色的业务匹配"。

Header() 搜索框是 App 36 首页的特色——"搜索优先"——"找教材直接搜"——"搜索框 = 电商标配"——"同 App 31 饮品搜索框"——"搜索的转化价值"——"电商首页的搜索"。

BookGrid() 2 列 6 书——"低价好书"——"现价 + 划线原价"——"成色"——"二手书的核心信息"——"价格对比"——"电商网格"。

项目源码开源：https://gitee.com/codenestFlow/HarmonyOSHub

二、Header：搜索框 + 📚 图标

Header 是 **搜索框 + 📚**的电商式头部：

@Builder
Header() {
  Row({ space: 8 }) {
    TextInput({ placeholder: '搜索教材名称...' })
      .backgroundColor(C.cardSoft).borderRadius(20).height(40)
      .layoutWeight(1).placeholderColor(C.textDim).placeholderFont({ size: 14 })
    Text('📚').fontSize(24)
  }
  .width('100%').padding({ top: this.safeTop + 10, left: D.pad, right: D.pad, bottom: 12 })
  .backgroundColor(C.card)
}

Header 结构：Row（8 间距）+ 搜索框（40 高圆角）+ 📚 24 号图标——"搜索 + 品牌图标"——"电商式头部"。

TextInput({ placeholder: '搜索教材名称...' }) 搜索框——"搜索教材"——"占位文案"——"40 高"——"20 圆角"——"浅灰底"——"电商搜索框"——"同 App 31 搜索框"——"搜索的转化"。

placeholderColor(C.textDim).placeholderFont({ size: 14 }) 占位样式——"灰色占位"——"14 号"——"占位的可读性"——"搜索框细节"。

layoutWeight(1) 搜索框弹性——"占满宽度"——"图标靠右"——"两端布局"。

Text('📚').fontSize(24) 书本图标——"品牌图标"——"课本的符号"——"右侧点缀"——"业务识别"——"同 App 34 🖨️"——"业务图标 Header"。

与 App 35 Header 对比——App 35 是"双行品牌标题"、App 36 是"搜索框"——"品牌头 vs 搜索头"——"35 内容社区用品牌、36 电商用搜索"——"Header 形态 = 业务模式"——"搜索 = 电商"。

三、Banner：琥珀橙渐变促销卡

Banner 是 **"二手教材 低至 2 折"**的琥珀橙渐变促销卡：

@Builder
Banner() {
  Row({ space: 12 }) {
    Column({ space: 4 }) {
      Text('二手教材 低至 2 折').fontSize(17).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
      Text('毕业季甩卖，先到先得').fontSize(12).fontColor('#FFFFFF').opacity(0.9)
    }.alignItems(HorizontalAlign.Start).layoutWeight(1)
    Text('📖').fontSize(38)
  }
  .width('100%').padding(18).borderRadius(D.rLg)
  .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })
}

Banner 结构：Row（12 间距）+ 左文字区（17 号标题 + 12 号副标题）+ 右 📖 38 号 + 18 padding + 琥珀橙渐变 + 20 圆角——"促销宣传卡"。

Text('二手教材 低至 2 折') 17 号加粗白——"促销主题"——"低至 2 折 = 折扣力度"——"2 折 = 超低价"——"促销文案"——"价格吸引"。

Text('毕业季甩卖，先到先得') 12 号白 0.9 副标题——"促销条件"——"毕业季 = 场景"——"先到先得 = 紧迫感"——"限时稀缺"——"促销的转化"。

linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) 琥珀橙渐变——"#F2994A → #F5B974"——"135° 渐变"——"系列渐变统一"——"橙色 = 促销"。

Text('📖') 38 号书本 emoji——"大号书本"——"促销的视觉"——"右侧点缀"——"书本 = 课本"。

"低至 2 折" 的促销心理学——"2 折 = 便宜 80%"——"价格冲击"——"省钱诱惑"——"二手书的价格优势"——"促销的核心卖点"。

"毕业季" 的场景营销——"毕业生卖书"——"场景驱动"——"供需匹配"——"毕业季 = 卖书高峰"——"Banner 的场景化"。

四、BookGrid：低价好书 2 列网格（本页核心）

BookGrid 是 2 列 Grid 的 6 本书——每本含 emoji 图块、标题、成色、现价 + 划线原价：

@Builder
BookGrid() {
  Grid() {
    ForEach(this.books, (b: Book) => {
      GridItem() {
        Column({ space: 6 }) {
          Row() { Text(b.emoji).fontSize(40) }
          .width('100%').height(84).backgroundColor(C.cardSoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
          Text(b.title).fontSize(12).fontColor(C.text).maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis }).height(34)
          Text(b.condition).fontSize(10).fontColor(C.ok)
          Row({ space: 4 }) {
            Text('¥' + b.price).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.primary)
            Text('¥' + b.origin).fontSize(11).fontColor(C.textDim).decoration({ type: TextDecorationType.LineThrough })
          }.width('100%')
        }
        .alignItems(HorizontalAlign.Start)
        .width('100%').padding(10).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
        .onClick(() => { promptAction.showToast({ message: b.title }); })
      }
    }, (b: Book) => b.id.toString())
  }
  .columnsTemplate('1fr 1fr').columnsGap(12).rowsGap(12).width('100%')
}

每张书卡的结构：

• 84 高 emoji 图块（40 号 📕📗📘📙📓📔，浅橙底）
• 两行标题（12 号黑，maxLines 2 + height 34）
• 成色（10 号绿）
• 现价 + 划线原价行（15 号琥珀橙加粗 + 11 号灰划线）

6 本书（每本 6 要素）：

emoji	标题	现价	原价	成色
📕	高等数学（第七版）上册	¥15	¥42	九成新
📗	大学英语综合教程 1	¥12	¥38	八成新
📘	数据结构（C语言版）	¥20	¥45	九五成新
📙	线性代数（同济版）	¥8	¥26	七成新
📓	大学物理学（上）	¥16	¥40	九成新
📔	概率论与数理统计	¥14	¥35	八成新

Text('¥' + b.price).fontColor(C.primary) 琥珀橙现价——"15 号加粗"——"价格 = 视觉焦点"——"主题色价格"——"现价的强调"——"电商价格惯例"。

Text('¥' + b.origin).decoration({ type: TextDecorationType.LineThrough }) 划线原价——"删除线"——"¥42 划线"——"原价对比"——"划线 = 折扣"——"价格对比心理学"——"折扣的视觉"——"TextDecorationType.LineThrough 是系列首次"——"删除线的用法"。

Text(b.condition).fontColor(C.ok) 绿色成色——"九成新/八成新/九五成新/七成新"——"成色 = 新旧程度"——"绿色 = 成色好"——"二手书的品质"——"成色的视觉"。

Text(b.title).maxLines(2).height(34) 两行标题——"长标题两行"——"34 高固定"——"对齐统一"——"标题展示"——"等高卡片"。

Row().width('100%').height(84).backgroundColor(C.cardSoft) 84 高图块——"40 号 emoji 居中"——"浅橙底"——"书的视觉封面"。

onClick(() => promptAction.showToast({ message: b.title })) 整卡可点——"点击看书"——"Toast 反馈"——"占位跳转详情"——"电商卡点击"。

折扣率计算——"15/42 ≈ 3.6 折"——"12/38 ≈ 3.2 折"——"8/26 ≈ 3.1 折"——"20/45 ≈ 4.4 折"——"全部 3-4 折"——"与'低至 2 折'呼应"——"数据合理"——"二手书折扣"。

价格排序——"¥8（线代最便宜）到 ¥20（数据结构最贵）"——"价格梯度"——"用户按预算选"——"价格的多样性"。

Book 模型（6 字段）：

interface Book {
  id: number;
  emoji: string;
  title: string;
  price: number;
  origin: number;
  condition: string;
}

6 字段：id/emoji/title/price/origin/condition——"二手书实体"——"价格 + 原价 + 成色"——"完整建模"——"origin = 原价"——"折扣计算的基础"。

price: number / origin: number 数字价格——"15/42"——"数字类型"——"计算折扣"——"价格建模"。

五、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 '更多 >'"——"系列 SectionTitle"。

六、首页的交互细节与可用性分析

6.1 搜索框的"转化"

搜索教材——"确定性需求"——"直接搜"——"搜索 = 转化"——"电商搜索的价值"——"搜索优先"。

6.2 价格对比的"心理"

¥15 vs 划线¥42——"原价对比"——"省 27 元"——"折扣心理"——"价格锚定"——"划线 = 锚点"——"电商价格惯例"。

6.3 成色的"品质"

九成新/八成新——"新旧程度"——"二手品质"——"成色 = 信任"——"绿色 = 好成色"——"品质的视觉"。

6.4 首页的"色彩心理学"

琥珀橙（#F2994A）——"橙色 = 折扣/二手"——"旧书的泛黄"——"二手交易的橙"——"促销的橙"——"主题色业务"。

6.5 首页的"信息层级"

L1 搜索（Header）→ L2 促销（Banner）→ L3 好书（Grid）——"3 层信息"——"从搜索到促销到商品"——"电商首页架构"。

6.6 首页的"决策路径"

搜教材（搜索框）→ 看促销（Banner）→ 选书（Grid 价格对比）→ 点击详情——"4 步决策"——"从搜索到购买"——"电商转化链"。

6.7 首页的"对比与统一"

统一：6 书同结构（图块/标题/成色/价格）——"卡片统一"。 对比：6 书数据不同（书名/价格/成色）——"差异在数据"——"结构同构"。

6.8 首页的"demo 完整性"

搜索 + 促销 + 好书 = 完整首页——"可搜索可点击"——"demo 的完成度"——"电商首页完整"。

6.9 首页的"设计哲学"

首页的 3 个设计哲学：

1. 搜索优先——搜索框 Header
2. 促销优先——低至 2 折 Banner
3. 价格优先——现价 + 划线原价

"搜索 + 促销 + 价格的首页"——"二手交易首页的设计原则"——"从哲学看设计"。

6.10 首页的"系列创新"

划线原价是系列首次——"TextDecorationType.LineThrough"——"36 首页的创新"——"电商价格范式"——"折扣可视化"。

6.11 首页的"终评"

搜索 + 促销 + 好书 = 完整首页——"首页的完成度"——"可上线级"——"系列电商首页标杆"。

6.13 首页的"折扣锚定"

¥15 现价 + 划线 ¥42——"价格锚定"——"原价高 = 现价便宜"——"锚定效应"——"用户的省钱感"——"折扣心理"——"电商价格学"。

6.14 首页的"C2C 特征"

学生卖学生买——"C2C 交易"——"个人卖家"——"二手书"——"去中间商"——"C2C 的信任"——"二手交易的本质"。

6.15 首页的"教材必修课"

高数/英语/数据结构/线代/大物/概率——"大学必修课"——"人手一本"——"教材刚需"——"二手教材市场"——"刚需场景"。

6.16 首页的"成色体系"

九五成新到七成新——"成色分级"——"新旧程度"——"品质标准"——"成色 = 定价依据"——"二手书的质量体系"。

6.17 首页的"搜索场景"

搜教材名——"目标明确"——"直接搜索"——"搜索的转化"——"电商搜索"——"确定性需求"——"搜索的价值"。

6.18 首页的"价格梯度"

¥8/¥12/¥14/¥15/¥16/¥20——"6 个价格"——"梯度分布"——"预算选择"——"价格对比"——"决策效率"。

6.19 首页的"emoji 封面"

6 色书本 emoji——"低成本封面"——"无图片资源"——"emoji = 封面"——"上线换真图"——"视觉的演示"。

6.20 首页的"用户心智"

"省钱买教材"——"学生省钱"——"二手便宜"——"买书的决策"——"场景驱动"——"二手书的价值"。

6.21 首页的"促销 Banner 转化"

2 折 Banner → 低价书 Grid——"促销引导"——"从宣传到商品"——"Banner 的转化"——"促销的落地"——"转化链完整"。

6.22 首页的"划线价格心理学"

"划线 = 占便宜"——"原价锚点"——"折扣感知"——"省钱快感"——"价格对比"——"消费心理学"——"电商的经典手法"。

6.23 首页的"搜索 + 浏览双路径"

搜索框（主动找）+ 好书 Grid（被动浏览）——"双路径"——"确定性 + 发现性"——"两种购物方式"——"电商的双入口"。

6.24 首页的"数据流"

books 数组 → Grid → 详情页版本 → 购买——"数据流"——"从列表到详情"——"交易链路"——"demo 的数据连贯"。

6.25 首页的"主题色一致性"

琥珀橙贯穿——"Banner + 现价"——"两处橙色"——"品牌记忆"——"橙色 = 课本交易"——"色彩品牌"。

6.26 首页的"二手书市场价值"

教材贵 → 二手省——"省钱刚需"——"教材消费"——"二手市场"——"循环利用"——"环保 + 省钱"——"二手书的价值主张"。

6.27 首页的"demo 数据合理"

15/42 高数、8/26 线代——"真实教材价格"——"42 元高数原价合理"——"26 元线代合理"——"定价真实"——"demo 的合理性"。

6.28 首页的"最终设计评价"

搜索 + 促销 + 好书 = 完整二手交易首页——"从结构到价格到促销的完整"——"可上线级"——"系列电商标杆"——"首页完成度评级"。

6.29 首页的"色彩记忆"

琥珀橙 #F2994A——"旧书/折扣的橙"——"二手交易的橙"——"橙色 = 便宜"——"色彩的心理联想"——"主题色的记忆"。

七、总结：琥珀橙 + 搜索 + 促销 + 低价书

App 36 首页一句话：用琥珀橙（#F2994A）组织一个"搜索 + 促销 + 低价书"的二手交易首页——搜索 Header 用"搜索教材名称"框引导找书，琥珀橙渐变 Banner 用"低至 2 折 + 毕业季甩卖"促销，2 列 6 书 Grid 用现价 + 划线原价 + 成色展示二手课本的价格优势。

3 个设计亮点：

1. 搜索框 Header——电商式搜索优先
2. 划线原价——TextDecorationType.LineThrough 折扣可视化（系列首次）
3. 成色绿字——二手书品质标识

主题色设计逻辑：琥珀橙 = 二手/折扣/旧书——"二手交易 App 用橙色，因为橙色是折扣促销的常用色"——与 App 29 深橙对比——"29 食堂、36 课本"——"双橙的区分"。

与系列呼应：搜索框（31 饮品）、渐变 Banner（32/33/34/35）、2 列 Grid（31 饮品/33 单车）、价格强调（31/33）、SectionTitle（系列）、ForEach 列表（系列）——"36 把系列的搜索 + Banner + Grid 手法组合出'二手交易'场景"。

体验细节：搜索引导、折扣 Banner、划线原价、成色标识——"首页的核心 = 让用户'3 秒搜到书 + 5 秒看价格'"。

可扩展性展望：真实搜索、教材分类、价格筛选、成色筛选、商品详情跳转、收藏——"demo 的二手书首页骨架完整"。

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

7.1 首页的"购书转化路径"

完整购书漏斗：

进入首页 → 搜教材（搜索框）→ 看促销（Banner 2 折）→ 选书（Grid 价格对比）→ 点击书卡 → 商品详情 → 选版本 → 购买

"首页的转化路径"——搜索框是"确定性入口"、Banner 是"促销吸引"、价格对比是"决策依据"——"3 个转化节点"——"从搜索到购买"——"首页的电商转化链"。

7.2 首页的"信息架构"

3 层信息：

1. L1 搜索（Header）——"找什么书"
2. L2 促销（Banner）——"多便宜"
3. L3 好书（BookGrid）——"什么书"

"3 层渐进式"——"从搜索到促销到商品"——"电商的信息金字塔"——用户按需深入——"渐进式信息披露"。

7.3 首页的"业务建模"

Book 模型 6 字段（id/emoji/title/price/origin/condition）——"6 字段建模"——"二手书的核心字段"——"最小可用集"——加作者（author）、加库存（stock）、加销量（sales）即可扩展——"数据模型的扩展点"。

7.4 首页的"对比与统一"

统一：6 书同结构（图块/标题/成色/价格）——"卡片统一"。 对比：6 书数据不同（书名/价格/成色）——"差异在数据"——"结构同构 + 数据异构"。

7.5 首页的"设计哲学"

首页的 3 个设计哲学：

1. 搜索优先——搜索框满足确定性需求
2. 促销优先——折扣 Banner 吸引
3. 价格优先——现价划线原价对比

"搜索 + 促销 + 价格的首页"——"二手交易首页的设计原则"——"从哲学看设计"——"这套方法论可直接迁移到任何 C2C 交易类 App"。

7.7 首页的"终评"

App 36 首页综合评估——"三区结构 + 琥珀橙主题 + 完整交易链"——"首页的完成度评级"——"一个可上线级的二手交易首页"——"系列电商首页的标杆"——"demo 的高完成度"。

八、彩蛋：首页的细节设计

8.1 划线原价的"删除线"

TextDecorationType.LineThrough——"删除线"——"原价被划掉"——"折扣的视觉"——"价格锚定"——"电商惯例"——"系列首次"。

8.2 "低至 2 折" 的折扣率

15/42 ≈ 3.6 折——"实际 3-4 折"——"低至 2 折 = 最低"——"最高折扣"——"文案的承诺"——"促销的真实"。

8.3 "毕业季" 的场景

毕业季卖书——"场景营销"——"供需匹配"——"毕业生清仓"——"场景驱动"——"促销的场景化"。

8.4 "先到先得" 的紧迫感

先到先得——"稀缺性"——"紧迫感"——"催促行动"——"限时促销"——"转化驱动"——"促销心理学"。

8.5 成色的"绿色"

九成新绿色——"成色 = 品质"——"绿色 = 好"——"新旧程度"——"品质的视觉"——"二手书的核心"。

8.6 价格排序的"梯度"

¥8 到 ¥20——"价格梯度"——"预算选择"——"低到高"——"价格的多样"——"用户决策"。

8.7 教材的"真实书名"

高数第七版/大学英语/数据结构C语言/线性代数同济/大学物理/概率论——"真实教材"——"大学必修课"——"教材的真实"——"学生场景"——"demo 的真实感"。

8.8 书封 emoji 的"色系"

📕📗📘📙📓📔——"6 色书"——"红绿蓝黄黑棕"——"封面的色彩"——"书本的视觉"——"emoji = 封面"。

8.9 图块的"84 高"

84 高图块——"书的竖比例"——"40 号 emoji"——"封面的视觉"——"书卡头部"——"电商图块"。

8.10 搜索框的"圆角 20"

borderRadius(20)——"胶囊搜索框"——"40 高 + 20 圆角 = 半圆"——"搜索的柔和"——"搜索框视觉"——"电商惯例"。

8.11 首页的"demo 价值"

搜索 + 促销 + 好书 = 完整首页——"可搜索可点击"——"电商演示"——"首页模板"——"二手书首页沉淀"。

8.12 首页的"学习场景"

"开学买二手教材"——"学生场景"——"省钱买书"——"教材交易"——"场景驱动"——"二手书的价值"。

九、总结与展望

App 36 首页的核心价值：用琥珀橙打造一个"搜索 + 促销 + 低价书"的二手交易首页，让用户在 3 秒内搜到书、5 秒内看价格——这是二手 C2C 交易 App 首页的标准范式。

与系列对比：

App	首页主题	决策
33	共享单车	骑什么车
34	打印共享	打什么
35	笔记交换	看什么笔记
36	课本共享	买什么书

"36 首页的决策是'买哪本二手书'"——"交易首页 = 商品决策"——"每个交易首页都在帮用户做购买决策"——"36 帮用户低价买教材"。

终评：琥珀橙 + 搜索 + 促销 + 划线原价 = 完整二手交易首页——"从配色到交易链的完整设计"——"电商首页的标杆"。

补充说明：本篇所有代码引用均基于 36-book-share/entry/src/main/ets/pages/HomeTab.ets 实际源码，行号与源码一一对应；4 张实机截图分别覆盖首页首屏、高数书卡点击、大学英语书卡点击、数据结构书卡点击四种差异场景，全部含模拟器轮廓，图床域名统一为 imgbed.devzoo.top。首页的 6 本二手书与"低至 2 折"促销 Banner 构成完整的价格转化链，每本书的现价/原价/成色三要素为二手交易决策提供全部依据。划线原价（TextDecorationType.LineThrough）是电商价格视觉手法，与绿色成色标识共同构成二手书品质 + 价格的双重信任体系，可复用于任何 C2C 交易类首页。