鸿蒙原生应用 ArkUI 声明式拆解：课本商品页的多版本列表与教材头

App 36「校园课本共享」商品（Func1Tab），主题色 #F2994A 琥珀橙。商品页是系列首个"多版本商品详情页"，采用"Header + 教材头 + 版本列表"三区布局——白色 Header（"教材详情"标题） + BookHead 教材头卡（📕 72×92 大封面 + "高等数学（第七版）上册"标题 + "同济大学数学系 编"编者 + "原价 ¥42.00" + "4 个在售版本"橙色提示） + SectionTitle（可选版本）+ 4 个版本列表（第七版·九五成新 ¥20 几乎全新无笔记 计科李同学 购买 / 第七版·九成新 ¥15 少量笔记不影响 软件张同学 / 第六版·八成新 ¥10 有笔记划线 数学王同学 / 第七版·七成新 ¥8 封面磨损内容完整 电子陈同学，每条含版本标签 + 琥珀橙价格 + 成色描述 + 卖家 + 橙色"购买"按钮）。本篇基于 36-book-share/entry/src/main/ets/pages/Func1Tab.ets（约 92 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"Header + 教材头 + 版本"布局

App 36 商品页是"标题 + 教材概览 + 多版本列表"的电商详情页——4 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.BookHead()
        this.SectionTitle('可选版本')
        this.VersionList()
      }
      .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. BookHead — 教材头卡（封面 + 信息）
3. SectionTitle('可选版本') + VersionList — 4 个版本

与 App 35 笔记详情页对比：App 35 是"详情头 + 预览 + 章节目录 + 固定底栏"、App 36 是"教材头 + 版本列表"——"35 内容详情 vs 36 商品详情"——"35 点赞下载、36 购买"——"两种详情页"——"35 内容消费、36 商品交易"——"详情页的业务差异"。

"多版本" 是 App 36 的特色——"同一本教材多个人卖"——"C2C 多卖家"——"版本 + 成色 + 价格各异"——"用户比较选择"——"二手交易的核心"——"多版本列表"。

主题色 #F2994A 琥珀橙——同首页——"品牌色贯穿全 App"。

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

二、Header：白色 + "教材详情"

Header 是 **白色 + "教材详情"**的极简标题头：

@Builder
Header() {
  Row() { Text('教材详情').fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) }
  .width('100%').height(this.safeTop + 56).padding({ top: this.safeTop, left: D.pad, right: D.pad })
  .backgroundColor(C.card).alignItems(VerticalAlign.Bottom)
}

Header 结构：白色背景 + 20 号加粗黑色"教材详情" + 56 高 + safeTop + 底部对齐——"同系列标准 Header"。

"教材详情" 的命名——"教材 + 详情"——"教材详情 = 单本查看"——"商品详情页标题"——"从首页选书进入"——"详情命名"。

height(this.safeTop + 56) 固定高度——"56 + safeTop = 标准 Header 高"——"系列统一"。

alignItems(VerticalAlign.Bottom) 底部对齐——"避开状态栏"——"标准适配"。

三、BookHead：教材头卡

BookHead 是 📕 大封面 + 书名 + 编者 + 原价 + 在售数的教材头卡：

@Builder
BookHead() {
  Row({ space: 14 }) {
    Row() { Text('📕').fontSize(44) }
    .width(72).height(92).backgroundColor(C.cardSoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
    Column({ space: 6 }) {
      Text('高等数学（第七版）上册').fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text)
      Text('同济大学数学系 编').fontSize(12).fontColor(C.textDim)
      Text('原价 ¥42.00').fontSize(12).fontColor(C.textDim)
      Text('4 个在售版本').fontSize(12).fontColor(C.primary)
    }.alignItems(HorizontalAlign.Start).layoutWeight(1)
  }
  .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke })
}

BookHead 结构：Row（14 间距）+ 左 72×92 大封面 + 右文字区（书名/编者/原价/在售数）+ 14 padding + 白底 + 20 圆角 + 1px 边框——"教材头卡"。

Row().width(72).height(92).backgroundColor(C.cardSoft) 72×92 大封面——"比首页 84 高更大"——"72×92 = 竖版书形"——"浅橙底"——"44 号 📕 居中"——"教材的主视觉"。

Text('高等数学（第七版）上册') 16 号加粗标题——"教材名"——"完整书名"——"16 号详情标题"——"同首页"——"跨页一致"。

Text('同济大学数学系 编') 12 号灰编者——"编者信息"——"同济版高数"——"出版社/编者"——"教材权威性"——"版本信息"。

Text('原价 ¥42.00') 12 号灰原价——"原价"——"¥42.00 两位小数"——"价格参考"——"与首页划线 ¥42 呼应"——"跨页一致"。

Text('4 个在售版本') 12 号橙色提示——"在售数量"——"4 个版本"——"橙色 = 可售"——"供给信息"——"引导浏览版本"——"在售的转化"。

"教材头 = 完整信息"：书名 + 编者 + 原价 + 在售数——"4 类信息"——"教材概览"——"详情页头部"——"电商商品头"。

与 App 35 NoteHead 对比——App 35 是"❤️点赞 + ⬇️下载 + 📄页数"、App 36 是"编者 + 原价 + 在售数"——"35 内容数据 vs 36 商品数据"——"详情头的业务差异"——"字段 = 业务"。

四、VersionList：4 个可选版本（本页核心）

VersionList 是 4 个版本列表——每条含版本标签 + 价格 + 成色描述 + 卖家 + 购买按钮：

@Builder
VersionList() {
  Column({ space: 12 }) {
    ForEach(this.versions, (v: Version) => {
      Column({ space: 8 }) {
        Row() {
          Text(v.label).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).layoutWeight(1)
          Text('¥' + v.price).fontSize(17).fontWeight(FontWeight.Bold).fontColor(C.primary)
        }.width('100%')
        Text(v.condition).fontSize(12).fontColor(C.textSub).width('100%')
        Row() {
          Text('卖家: ' + v.seller).fontSize(11).fontColor(C.textDim).layoutWeight(1)
          Text('购买').fontSize(12).fontColor('#FFFFFF')
            .padding({ left: 16, right: 16, top: 6, bottom: 6 }).backgroundColor(C.primary).borderRadius(D.rSm)
            .onClick(() => { promptAction.showToast({ message: '购买 ' + v.label }); })
        }.width('100%')
      }
      .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    }, (v: Version) => v.id.toString())
  }.width('100%')
}

每个版本卡的结构：

• 第一行：版本标签（14 号 Medium）+ 琥珀橙价格（17 号加粗）
• 第二行：成色描述（12 号灰）
• 第三行：卖家（11 号灰）+ "购买"按钮

4 个版本（每版 5 要素）：

版本标签	价格	成色描述	卖家
第七版 · 九五成新	¥20	几乎全新，无笔记	计科李同学
第七版 · 九成新	¥15	少量笔记，不影响使用	软件张同学
第六版 · 八成新	¥10	有笔记划线	数学王同学
第七版 · 七成新	¥8	封面磨损，内容完整	电子陈同学

Text('¥' + v.price).fontColor(C.primary) 17 号琥珀橙价格——"价格 = 焦点"——"17 号大号"——"加粗"——"版本价格的强调"——"同一本书不同价格"——"价格对比"。

Text(v.condition) 12 号灰成色描述——"几乎全新无笔记"——"少量笔记"——"有笔记划线"——"封面磨损"——"成色的细节"——"品质描述"——"买家的参考"。

Text('卖家: ' + v.seller) 11 号灰卖家——"卖家信息"——"计科李同学"——"C2C 卖家"——"同学昵称"——"卖家 = 信任"——"二手交易的信任"。

Text('购买') 橙色购买按钮——"白字橙底"——"16+16 横向 padding"——"6+6 纵向"——"10 圆角"——"行动按钮"——"购买 = 转化"。

onClick(() => promptAction.showToast({ message: '购买 ' + v.label })) 购买反馈——"购买 第七版·九五成新"——"Toast 反馈"——"占位购买"——"真实产品走订单"。

版本的价格梯度——"¥20/¥15/¥10/¥8"——"成色越好越贵"——"九五成新 ¥20、七成新 ¥8"——"价格 = 成色"——"成色定价"——"价格与品质关联"。

版本的一致性——"第七版 ×3 + 第六版 ×1"——"同书多版本"——"版本差异"——"用户选择"——"教材版本的真实"。

卖家多样性——"计科/软件/数学/电子同学"——"4 个学院卖家"——"C2C 多卖家"——"同学的昵称"——"真实的二手交易"。

padding(14).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) 14 padding + 14 圆角 + 1px 边框——"版本卡标准"。

Version 模型（5 字段）：

interface Version {
  id: number;
  label: string;
  price: number;
  condition: string;
  seller: string;
}

5 字段：id/label/price/condition/seller——"版本实体"——"标签/价格/成色/卖家"——"完整建模"——"C2C 版本"。

label: string 版本标签——"第七版·九五成新"——"版本 + 成色合一"——"标签组合"。

五、商品页的交互细节与可用性分析

5.1 多版本的"比较购买"

4 个版本并列——"价格对比"——"成色对比"——"卖家对比"——"用户挑选"——"C2C 核心"——"比较的决策"。

5.2 价格梯度的"成色定价"

¥20 九五新 → ¥8 七成新——"成色越好越贵"——"价格 = 品质"——"成色定价"——"二手书的定价逻辑"——"价格梯度"。

5.3 购买按钮的"转化"

每版本一个购买——"直接购买"——"一键转化"——"购买 = 交易终点"——"版本卡的转化"——"电商详情页"。

5.4 商品页的"色彩心理学"

琥珀橙（#F2994A）——"橙色 = 交易"——"购买按钮橙"——"价格橙"——"在售数橙"——"橙色贯穿"——"交易的橙"。

5.5 商品页的"信息层级"

L1 标题（Header）→ L2 教材（BookHead）→ L3 版本（VersionList）——"3 层信息"——"从标题到教材到版本"——"商品详情架构"。

5.6 商品页的"决策路径"

看教材（头卡）→ 看版本（价格对比）→ 选卖家（信任）→ 点购买——"4 步决策"——"从了解到购买"——"电商转化链"。

5.7 商品页的"对比与统一"

统一：4 版本同结构（标签/价格/成色/卖家/购买）——"版本卡统一"。 对比：4 版本数据不同（版本/价格/成色/卖家）——"差异在数据"——"结构同构"。

5.8 商品页的"demo 完整性"

教材头 + 版本列表 = 完整商品页——"可比较可购买"——"demo 的完成度"——"电商详情完整"。

5.9 商品页的"设计哲学"

商品页的 3 个设计哲学：

1. 信息完整——教材头 4 类信息
2. 比较优先——多版本并列
3. 转化优先——每版本购买按钮

"信息 + 比较 + 转化的商品页"——"C2C 详情页的设计原则"——"从哲学看设计"。

5.10 商品页的"系列创新"

多版本列表是系列首次——"36 商品页的创新"——"C2C 多卖家"——"版本选择"——"电商详情范式"。

5.11 商品页的"终评"

教材头 + 版本列表 + 购买 = 完整商品页——"商品页的完成度"——"可上线级"——"系列电商详情标杆"。

5.12 版本标签的"组合"

第七版·九五成新——"版本 + 成色合一"——"标签组合"——"信息浓缩"——"一标签两信息"——"标签设计"。

5.13 商品页的"信任体系"

成色描述 + 卖家昵称——"品质信任 + 卖家信任"——"双信任"——"C2C 的核心"——"交易的信任"——"二手书的安全感"。

5.14 商品页的"与首页呼应"

首页 ¥15 高数 → 商品页 ¥15 版本——"跨页价格一致"——"数据连贯"——"demo 全局数据"——"价格一致性"。

5.15 商品页的"C2C 信任"

成色描述 + 卖家昵称——"双信任"——"品质信任"——"卖家信任"——"C2C 交易安全"——"信任 = 成交"——"二手交易的核心"。

5.16 商品页的"版本比较"

第七版 vs 第六版——"版本差异"——"教材版本"——"用户按需选"——"版本选择"——"比较的决策"——"版本对比价值"。

5.17 商品页的"价格锚定"

原价 ¥42 vs 版本 ¥8-20——"价格锚定"——"42 元原价"——"8 元二手"——"省 34 元"——"折扣感知"——"购买心理"。

5.18 商品页的"购买转化"

每版本购买按钮——"直接转化"——"一键购买"——"版本卡操作"——"电商转化"——"购买 = 交易终点"。

5.19 商品页的"卖家昵称"

计科李同学——"学院 + 姓 + 同学"——"昵称的格式"——"校园身份"——"C2C 校园交易"——"昵称的真实"。

5.20 商品页的"成色透明度"

无笔记/少量笔记/划线/磨损——"成色细节透明"——"如实描述"——"买家知情"——"交易公平"——"透明 = 信任"。

5.21 商品页的"demo 数据"

4 版本 + 4 卖家 + 4 价格——"数据丰富"——"版本多样性"——"卖家多样性"——"demo 的真实"——"数据建模"。

5.22 商品页的"用户心智"

"买二手教材"——"学生省钱"——"比较版本"——"选性价比"——"场景驱动"——"交易的价值"。

5.24 商品页的"最终设计评价"

教材头 + 版本列表 = 完整商品页——"从概览到比较到购买的完整"——"可上线级"——"系列电商标杆"——"商品页完成度评级"。

六、总结：琥珀橙 + 教材头 + 多版本

App 36 商品页一句话：用琥珀橙（#F2994A）组织一个"教材头 + 多版本"的二手书详情页——BookHead 用 72×92 大封面 + 书名 + 编者 + 原价 + 在售数展示教材概览，4 个版本列表用版本标签 + 琥珀橙价格 + 成色描述 + 卖家 + 购买按钮让用户比较选择购买。

3 个设计亮点：

1. 多版本比较——4 版本并列，C2C 多卖家
2. 成色定价——¥20 九五新 → ¥8 七成新价格梯度
3. 每版本购买——版本卡独立购买按钮

主题色设计逻辑：琥珀橙 = 交易/价格——"商品页用琥珀橙，购买按钮与价格都用品牌色"——"橙色 = 购买转化"——"主题色贯穿"。

与系列呼应：固定 Header（系列）、ForEach 列表（系列）、价格强调（31/33/36 首页）、购买按钮（26/34 按钮）、卖家信息（35 by 作者）——"36 商品把系列的列表 + 价格 + 按钮手法组合出'二手交易'场景"。

体验细节：多版本比较、成色定价、卖家信任、购买转化——"商品页的核心 = 让用户'3 秒比较版本 + 5 秒下单'"。

可扩展性展望：真实订单、支付、聊天议价、版本筛选、卖家主页、评价体系——"demo 的商品页骨架完整"。

六、扩展思考：商品页的比较决策与设计哲学

6.1 商品页的"购买路径"

完整购买漏斗：

首页选书 → 商品页 → 看教材头（原价/在售数）→ 比较版本（价格/成色/卖家）→ 点购买 → 下单

"商品页的转化路径"——教材头是"概览"、版本列表是"比较"、购买按钮是"行动"——"从了解到购买"——"商品页的电商转化链"——"C2C 购买流程"。

6.2 商品页的"信息架构"

3 层信息：

1. L1 标题（Header）——"教材详情"
2. L2 概览（BookHead）——"什么教材"
3. L3 版本（VersionList）——"谁在卖"

"3 层渐进式"——"从标题到教材到版本"——"商品的信息金字塔"——"用户逐步深入"。

6.3 商品页的"业务建模"

Version 模型 5 字段（id/label/price/condition/seller）——"5 字段建模"——"C2C 版本的核心"——"最小可用集"——加状态（sold）、加评价（rating）即可扩展——"数据模型的扩展点"。

6.4 商品页的"对比与统一"

统一：4 版本同结构（标签/价格/成色/卖家/购买）——"版本卡统一"。 对比：4 版本数据不同（版本/价格/成色/卖家）——"差异在数据"——"结构同构 + 数据异构"。

6.5 商品页的"设计哲学"

商品页的 3 个设计哲学：

1. 信息完整——教材头 4 类信息
2. 比较优先——多版本价格成色并列
3. 转化优先——每版本购买按钮

"信息 + 比较 + 转化的商品页"——"C2C 详情页的设计原则"——"从哲学看设计"——"这套方法论可直接迁移到任何 C2C 交易类 App"。

6.6 商品页的"终评"

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

七、彩蛋：商品页的细节设计

7.1 成色定价的"价格梯度"

¥20/¥15/¥10/¥8——"成色递减价格递减"——"九五新 20、七成新 8"——"价格 = 品质"——"成色定价"——"二手定价逻辑"——"价格梯度清晰"。

7.2 卖家的"学院昵称"

计科/软件/数学/电子同学——"4 个学院"——"C2C 卖家"——"昵称 = 身份"——"同学的真实感"——"校园二手交易"——"卖家多样性"。

7.3 "几乎全新，无笔记" 的描述

"几乎全新，无笔记"——"成色细节"——"无笔记 = 干净"——"品质描述"——"买家参考"——"描述的真实"——"成色透明度"。

7.4 版本标签的"合一"

"第七版 · 九五成新"——"版本 + 成色"——"一标签两信息"——"信息浓缩"——"标签设计"——"快速识别"。

7.5 购买按钮的"橙底白字"

白字橙底——"购买 = 主操作"——"橙色 = 转化"——"高对比"——"按钮的突出"——"行动召唤"。

7.6 原价 ¥42.00 的"两位小数"

"¥42.00"——"两位小数"——"价格规范"——"原价精确"——"与首页 ¥42 呼应"——"价格一致性"。

7.7 "4 个在售版本" 的引导

"4 个在售版本"——"供给提示"——"橙色引导"——"版本数量"——"选择预期"——"引导浏览"——"转化引导"。

7.8 教材的"编者权威"

"同济大学数学系 编"——"权威编者"——"高数经典教材"——"版本信任"——"教材的正版"——"信任背书"。

7.9 商品页的"demo 完整性"

教材头 + 版本列表 = 完整商品页——"可比较可购买"——"电商详情演示"——"demo 完成度"——"C2C 详情模板"。

八、总结与展望

App 36 商品页的核心价值：用琥珀橙 + 教材头 + 多版本比较，构建一个"3 秒比较版本 + 5 秒下单"的二手书详情页——这是 C2C 二手交易 App 详情页的标准范式。

与系列对比：

App	详情/商品类页面	决策
35	笔记详情	赞不赞
36	教材详情	买哪版

"36 商品页的决策是'买哪个版本'"——"商品页 = 比较购买"——"每个商品页都在帮用户做购买决策"——"36 帮用户选版本下单"。

终评：琥珀橙 + 教材头 + 多版本 = 完整商品详情页——"从配色到比较链的完整设计"——"电商详情页的标杆"。

补充说明：本篇所有代码引用均基于 36-book-share/entry/src/main/ets/pages/Func1Tab.ets 实际源码，行号与源码一一对应；4 张实机截图分别覆盖详情首屏、九五成新版购买、八成新版购买、七成新版购买四种差异场景，全部含模拟器轮廓，图床域名统一为 imgbed.devzoo.top。多版本列表的"版本标签 + 价格 + 成色 + 卖家 + 购买"五要素是 C2C 二手交易详情页的标准范式，其比较购买交互可复用于任何多卖家商品场景。四个版本按价格 ¥20/¥15/¥10/¥8 递降排列，与成色（九五新→七成新）严格对应，直观展示了"成色定价"的二手书定价逻辑。