鸿蒙原生应用 ArkUI 实战：深灰 Banner + 3 列规格网格 —— 证件照首页的规格选择架构

App 51「个人证件照制作」首页（HomeTab），主题色 #2D3436 深灰黑（charcoal），4 个 Tab 分别为首页（🪪）、拍摄（📷）、编辑（✂️）、我的（👤）。本篇基于 51-id-photo/entry/src/main/ets/pages/HomeTab.ets（共 91 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"Header + Banner + 规格网格"布局

首页是"品牌头部 + 功能宣传 + 规格选择"的三区布局——3 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 16 }) {
        this.Banner()
        this.SectionTitle('常用规格')
        this.SpecGrid()
      }
      .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 块结构：Header（单行品牌头）→ Banner（深灰渐变功能宣传卡）→ SpecGrid（6 规格 3 列网格）。首页是"规格选择页"——先亮出产品卖点（一键制作/智能抠图/高清导出），再列出 6 种常用证件照规格，让用户选择"要哪种规格的证件照"，是工具型首页（选规格 → 开始制作）。

二、Header：单行品牌头

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)
}

22 号加粗、safeTop + 10 避让状态栏、白底全宽。与系列其他工具型首页（App 45 签到墙/App 47 班费管理）同款单行标题范式。

三、Banner：深灰渐变功能宣传卡

Banner() {
  Row({ space: 12 }) {
    Text('🪪').fontSize(40)
    Column({ space: 4 }) {
      Text('一键制作证件照').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
      Text('智能抠图 · 多种背景 · 高清导出').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]] })
  .onClick(() => { promptAction.showToast({ message: '开始制作' }); })
}

逐点拆解：

1. 深灰渐变：linearGradient 从 C.primary（#2D3436）渐变到 C.accent（#636E72）——系列首次深色主题，证件照工具的专业与正式感。
2. 三大卖点："智能抠图 · 多种背景 · 高清导出"对应拍摄（抠图）、编辑（背景）、保存（导出）三个功能页，Banner 是功能的宣传总纲。
3. 🪪 40 号大图标：产品符号（与 Tab 图标、我的页头像一致），🪪 即"证件照"。
4. 整卡 CTA：onClick 弹"开始制作"Toast——Banner 是"开始制作"的主入口（产品化后跳拍摄页）。

四、Spec 数据模型：6 种证件照行业标准

interface Spec {
  id: number;
  name: string;
  size: string;
  px: string;
}

private specs: Spec[] = [
  { id: 1, name: '一寸', size: '25×35mm', px: '295×413' },
  { id: 2, name: '二寸', size: '35×49mm', px: '413×579' },
  { id: 3, name: '小一寸', size: '22×32mm', px: '260×378' },
  { id: 4, name: '简历照', size: '35×45mm', px: '413×531' },
  { id: 5, name: '签证照', size: '33×48mm', px: '390×567' },
  { id: 6, name: '社保照', size: '32×26mm', px: '358×441' }
];

Spec 接口三字段：name（规格名）、size（毫米物理尺寸）、px（像素电子尺寸）。6 个规格覆盖"通用（一寸/二寸）+ 场景（简历/签证/社保）+ 表格（小一寸）"的证件照需求。毫米（打印）+ 像素（电子）双标注是证件照规格的完整参数——不同提交渠道要求不同：打印要毫米、上传要像素。

五、SpecGrid：常用规格 3 列网格

SpecGrid() {
  Grid() {
    ForEach(this.specs, (s: Spec) => {
      GridItem() {
        Column({ space: 8 }) {
          Column()
            .width(40).height(52).backgroundColor(C.primarySoft).borderRadius(4)
            .border({ width: 1, color: C.primary })
          Text(s.name).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text)
          Text(s.size).fontSize(11).fontColor(C.textDim)
          Text(s.px + ' px').fontSize(10).fontColor(C.textDim)
        }
        .width('100%').padding(16).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
        .onClick(() => { promptAction.showToast({ message: s.name + ' ' + s.size }); })
      }
    }, (s: Spec) => s.id.toString())
  }.columnsTemplate('1fr 1fr 1fr').columnsGap(10).rowsGap(10).width('100%')
}

逐点拆解：

1. 证件照模拟图块：Column().width(40).height(52) ——40×52 深灰描边竖长方形，比例对应 25×35mm（约 10:13），视觉上"看到的就是证件照的样子"。
2. 三行信息：14 号加粗规格名 + 11 号尺寸 + 10 号像素——名称/物理尺寸/像素尺寸的完整标识。
3. 3 列网格：columnsTemplate('1fr 1fr 1fr') + 10 间距——6 规格排为 2 行 3 列。
4. 整卡点击：onClick 弹 Toast"一寸 25×35mm"——产品化后选择规格跳拍摄页（预选该规格）。
5. key：s.id.toString() 稳定唯一。

六、深灰主题的视觉策略

export class C {
  static readonly bg: string = '#F2F5FB';
  static readonly card: string = '#FFFFFF';
  static readonly cardSoft: string = '#F4F6FB';
  static readonly stroke: string = '#EAEEF6';
  static readonly text: string = '#1C2333';
  static readonly textSub: string = '#5A6483';
  static readonly textDim: string = '#9AA3BC';
  static readonly primary: string = '#2D3436';
  static readonly primarySoft: string = '#E9ECEE';
  static readonly accent: string = '#636E72';
  static readonly warn: string = '#FF9F1C';
  static readonly danger: string = '#FF5A6E';
  static readonly ok: string = '#2BB673';
}

逐点拆解：

1. primary = #2D3436：深灰黑是"专业/正式/可靠"的语义色——证件照是正式证件的照片，工具用深色传达"专业可信"（对比 App 49 粉色温馨、App 42 紫色情绪）。
2. accent = #636E72：灰阶 accent——工具型 App 的克制配色（无彩色干扰，聚焦功能），与系列彩色主题（粉/紫/绿）形成对照。
3. bg = #F2F5FB：浅蓝灰页面底色——深底点缀（Banner）+ 浅底主体（内容区），专业感与可读性兼得。
4. primarySoft = #E9ECEE：浅灰用于次按钮/图块底色——深灰系的浅色变体，保持灰阶一致性。

七、跨页数据自洽：规格体系的全局闭环

private sizes: string[] = ['一寸', '二寸', '小一寸', '简历照'];

首页 6 规格中的 4 个（一寸/二寸/小一寸/简历照）= 编辑页 sizes 数组——编辑页是首页规格的常用子集（签证照/社保照是低频规格，未进编辑快捷选择）。首页选规格 → 拍摄页拍照片 → 编辑页调尺寸 → 我的页看历史，"选 → 拍 → 编 → 存"的制作流水线中，规格贯穿始终。

八、系列横向对比：工具型首页的规格/入口形态

工具首页	代表 App	首页焦点	核心动作	主题色
规格选择	App 51 证件照	6 规格网格	选规格	#2D3436 深灰
签到状态	App 45 签到墙	连续签到卡	去签到	#FDCB6E 暖黄
账务余额	App 47 班费管理	余额卡	看账	#00A862 翡翠绿
任务清单	App 48 班级任务	环形进度	勾选任务	#6C5CE7 深紫

差异点：证件照首页的核心是"选规格"（不同用途不同尺寸）——签到首页是"看状态"、账务首页是"看余额"、任务首页是"看进度"——工具首页的第一信息 = 该工具的第一步决策。深灰主题是"专业工具"的视觉归宿。

九、开发者视角：调试与验证技巧

          Column()
            .width(40).height(52).backgroundColor(C.primarySoft).borderRadius(4)
            .border({ width: 1, color: C.primary })

1. 图块比例验证：40×52 对应 25×35mm 的 10:13 比例——若按规格变比例需动态计算 width/height。
2. 网格换行：columnsTemplate('1fr 1fr 1fr') + 6 规格 = 2 行 3 列；若加规格（如护照照 → 7 个），第三行单卡左对齐（Grid 自动处理）。
3. 像素格式：295×413 px 的显示——验证 6 规格的像素格式统一（× 符号 + px 后缀），窄卡上 295×413 三卡一行不溢出。
4. 深灰 Banner 白字：#2D3436 渐变上的白字对比度高（深底白字最清晰），真机验证"一键制作证件照"等白字清晰可读。
5. 规格数据完整性：6 个规格的 { name, size, px } 三字段——缺失会导致网格信息不全；像素与毫米的对应关系（25×35mm → 295×413px）是行业数据，不能随意改。

十、演进方向

方向	当前状态	产品化演进
规格收藏	无	规格卡加"⭐ 收藏"，收藏的规格在我的页/下次制作置顶
用途推荐	罗列 6 规格	选场景（简历/签证/社保）→ 推荐对应规格
规格扩展	6 常用规格	动态增减（护照/港澳通行证等新规格）
Banner 跳转	Toast"开始制作"	跳拍摄页，携带默认规格
规格卡跳转	Toast"一寸 25×35mm"	跳拍摄页，预选该规格尺寸

十一、一句话总结

首页以"深灰 Banner + 规格网格"完成了证件照工具的规格选择。linearGradient 深灰渐变传达专业正式感、6 种常用规格（Spec 接口含毫米+像素双标注）、40×52 模拟证件照图块、columnsTemplate('1fr 1fr 1fr') 3 列网格——91 行代码，一个"选好规格就开工"的证件照首页，也是工具型产品规格选择页的标准范式。

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