鸿蒙原生应用 ArkTS 严格模式：考试资料库搜索页的 TextInput 绑定与热词回填

App 37「校园考试资料库」搜索（Func2Tab），主题色 #EB5757 考试红。搜索页是系列首个完整"搜索页"，采用"搜索框 + 热词 + 结果"三区布局——搜索 Header（🔍 16 号 + TextInput 搜索框"搜索试卷、题库、复习资料" + "搜索"红色文字按钮，onChange 绑定 @State keyword） + HotWords 热门搜索（"🔥 热门搜索"14 号加粗 + 5 个热词胶囊 Flex 换行：高数期末/英语四级/数据结构真题/考研数学/大物实验，点击回填 keyword 并 Toast） + SectionTitle（搜索结果）+ 3 条结果列表（📝 高等数学期末真题2025 试卷 PDF·12页 / 📚 高数章节题库精选 题库 360题 / 📄 高数考点复习提纲 复习 PDF·8页，每条含 46×46 浅红 emoji 头像 + 标题 + 红色类型标签 + 信息 + ⬇️ 下载按钮）。本篇基于 37-exam-bank/entry/src/main/ets/pages/Func2Tab.ets（约 108 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"搜索框 + 热词 + 结果"布局

App 37 搜索页是"检索入口 + 热门词 + 结果展示"的搜索页——4 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 16 }) {
        this.HotWords()
        this.SectionTitle('搜索结果')
        this.ResultList()
      }
      .width('100%')
      .padding({ left: D.pad, right: D.pad, top: 16, 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. HotWords — 热门搜索词（🔥）
3. SectionTitle('搜索结果') + ResultList — 3 条结果

与 App 36 首页搜索框对比：App 36 首页是"纯搜索框"、App 37 搜索页是"完整搜索页（框 + 热词 + 结果）"——"36 搜索入口 vs 37 搜索功能"——"37 是系列首个完整搜索 Tab"——"搜索页的范式"——"搜索功能的完整"。

与 App 37 首页/资料对比：

• 首页：课程 Grid + 热门资料（看）
• 资料：课程胶囊 + 章节（浏览）
• 搜索：搜索框 + 热词 + 结果（找）

"搜索页 = 检索"——"首页看、资料找、搜索搜"——"备考的检索链路"——"搜索 = 精准定位"——"37 的检索中枢"。

主题色 #EB5757 考试红——同首页/资料——"品牌色贯穿全 App"。

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

二、Header：搜索框 + 搜索按钮

Header 是 🔍 搜索框 + "搜索"按钮的检索头部：

@Builder
Header() {
  Column() {
    Row({ space: 10 }) {
      Row({ space: 8 }) {
        Text('🔍').fontSize(16)
        TextInput({ placeholder: '搜索试卷、题库、复习资料' })
          .backgroundColor(Color.Transparent).borderRadius(0).height(40)
          .layoutWeight(1).placeholderColor(C.textDim).placeholderFont({ size: 14 })
          .onChange((v: string) => { this.keyword = v; })
      }
      .layoutWeight(1).padding({ left: 12, right: 12 }).backgroundColor(C.cardSoft).borderRadius(20)
      Text('搜索').fontSize(14).fontColor(C.primary)
        .onClick(() => { promptAction.showToast({ message: '搜索: ' + this.keyword }); })
    }
    .width('100%').padding({ top: this.safeTop + 10, left: D.pad, right: D.pad, bottom: 12 })
  }.width('100%').backgroundColor(C.card)
}

Header 结构：Column + Row（10 间距）+ 左搜索框（🔍 + TextInput 透明底）+ 右"搜索"文字按钮——"检索头部"。

Text('🔍') 16 号放大镜 emoji——"搜索图标"——"检索的视觉"——"🔍 = 搜索"——"通用符号"。

TextInput({ placeholder: '搜索试卷、题库、复习资料' }) 搜索输入框——"占位提示"——"40 高"——"透明底"——"搜索内容"——"试卷/题库/复习资料"——"搜索范围的提示"——"同 App 31/36 搜索框"。

backgroundColor(Color.Transparent).borderRadius(0) 透明输入框——"内嵌在灰色容器"——"无边框"——"透明融合"——"搜索框的简洁"。

layoutWeight(1) 输入框弹性——"占满宽度"——"按钮靠右"——"两端布局"。

onChange((v: string) => { this.keyword = v; }) 值绑定——"keyword 状态"——"输入即更新"——"搜索状态"。

Text('搜索') 14 号红色按钮——"红色文字"——"点击搜索"——"搜索动作"——"主题色按钮"——"搜索的转化"。

onClick(() => promptAction.showToast({ message: '搜索: ' + this.keyword })) 搜索反馈——"搜索: 关键字"——"Toast 反馈"——"占位搜索"——"真实产品调接口"——"搜索反馈"。

Row({ space: 10 }) 搜索框 + 按钮间距——"10 间距"——"紧凑"。

padding({ top: this.safeTop + 10, bottom: 12 }) 安全区适配——"顶部安全区"——"系列标准"。

与 App 36 首页搜索框对比——App 36 是"纯搜索框 + 📚 图标"、App 37 是"搜索框 + 搜索按钮"——"36 无按钮、37 有按钮"——"37 搜索功能更完整"——"搜索按钮 = 明确动作"——"搜索页的完整"。

三、HotWords：热门搜索词（本页特色）

HotWords 是 "🔥 热门搜索" + 5 个热词胶囊：

@Builder
HotWords() {
  Column({ space: 10 }) {
    Text('🔥 热门搜索').fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width('100%')
    Flex({ wrap: FlexWrap.Wrap }) {
      ForEach(this.hotWords, (w: string) => {
        Text(w).fontSize(12).fontColor(C.textSub)
          .padding({ left: 14, right: 14, top: 7, bottom: 7 })
          .backgroundColor(C.card).borderRadius(16).border({ width: 1, color: C.stroke })
          .margin({ right: 10, bottom: 10 })
          .onClick(() => { this.keyword = w; promptAction.showToast({ message: w }); })
      }, (w: string) => w)
    }.width('100%')
  }
}

HotWords 结构：标题（"🔥 热门搜索"14 号加粗）+ Flex 换行 5 个热词胶囊——"热词推荐区"。

Text('🔥 热门搜索') 14 号加粗标题——"🔥 = 热门"——"热门搜索"——"区标题"——"热度的视觉"。

5 个热词：高数期末/英语四级/数据结构真题/考研数学/大物实验——"5 个高频搜索词"——"备考热词"——"课程 + 场景"——"热词的真实"。

Flex({ wrap: FlexWrap.Wrap }) 换行布局——"自动换行"——"5 词多行"——"标签云"——"热词布局"。

Text(w).fontSize(12).fontColor(C.textSub) 12 号灰热词——"热词文字"——"灰色"——"次要"。

padding({ left: 14, right: 14, top: 7, bottom: 7 }) 热词胶囊 padding——"胶囊内边距"——"16 圆角"——"胶囊形"。

backgroundColor(C.card).borderRadius(16).border({ width: 1, color: C.stroke }) 白底胶囊——"白底 + 1px 边框"——"热词胶囊"——"同系列胶囊"。

margin({ right: 10, bottom: 10 }) 胶囊间距——"10 间距"——"换行间距"——"标签布局"。

onClick(() => { this.keyword = w; promptAction.showToast({ message: w }); }) 点击热词——"回填 keyword"——"Toast 反馈"——"一键搜索热词"——"热词的快捷"——"点击即搜"。

"热词的价值"——"用户不用打字"——"一键搜索"——"高频词推荐"——"搜索引导"——"热词 = 效率"——"搜索的转化"——"热门搜索的运营"。

与 App 37 首页课程呼应——"高数期末/英语四级/数据结构"——"首页课程相关热词"——"跨页一致"——"课程体系统一"——"备考检索"。

四、ResultList：搜索结果列表

ResultList 是 3 条搜索结果的列表：

@Builder
ResultList() {
  Column({ space: 12 }) {
    ForEach(this.results, (r: Result) => {
      Row({ space: 12 }) {
        Row() { Text(r.emoji).fontSize(24) }
        .width(46).height(46).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
        Column({ space: 4 }) {
          Text(r.title).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          Row({ space: 8 }) {
            Text(r.type).fontSize(10).fontColor(C.primary)
              .padding({ left: 6, right: 6, top: 1, bottom: 1 }).backgroundColor(C.primarySoft).borderRadius(4)
            Text(r.info).fontSize(11).fontColor(C.textDim)
          }
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
        Text('⬇️').fontSize(16)
          .onClick(() => { promptAction.showToast({ message: '下载: ' + r.title }); })
      }
      .width('100%').padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    }, (r: Result) => r.id.toString())
  }.width('100%')
}

每条结果卡的结构：

• 左 46×46 浅红 emoji 头像（24 号 📝📚📄）
• 中 文字区（标题 14 号 + 红色类型标签 + 信息 11 号灰）
• 右 ⬇️ 下载按钮（16 号）

3 条结果（每条 6 要素）：

emoji	标题	类型	信息
📝	高等数学期末真题2025	试卷	PDF · 12页
📚	高数章节题库精选	题库	360题
📄	高数考点复习提纲	复习	PDF · 8页

Row().width(46).height(46).backgroundColor(C.primarySoft) 46×46 浅红头像——"24 号 emoji 居中"——"10 圆角"——"浅红底"——"结果类型标识"。

Text(r.title).maxLines(1).textOverflow 标题单行截断——"长标题截断"——"14 号 Medium"。

Text(r.type) 红色类型标签——"10 号红字"——"浅红底"——"4 圆角"——"6+6 padding"——"类型 tag"——"试卷/题库/复习"——"类型标识"。

Text(r.info) 11 号灰信息——"PDF·12页/360题/PDF·8页"——"文件信息"——"题型/页数"——"资料详情"。

Text('⬇️') 16 号下载按钮——"下载箭头"——"一键下载"——"下载的快捷"——"同系列下载"。

onClick(() => promptAction.showToast({ message: '下载: ' + r.title })) 下载反馈——"下载: 高数期末真题2025"——"Toast 反馈"——"占位下载"——"真实产品下载"。

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

Result 模型（5 字段）：

interface Result {
  id: number;
  emoji: string;
  title: string;
  type: string;
  info: string;
}

5 字段：id/emoji/title/type/info——"搜索结果实体"——"类型 + 信息"——"完整建模"——"type = 结果类型"。

3 结果的类型多样——"试卷/题库/复习"——"3 种资料类型"——"搜索的覆盖"——"资料类型完整"——"备考资料多样"。

信息的合理——"PDF 12 页/360 题/PDF 8 页"——"文件格式 + 数量"——"资料详情"——"数据合理"。

五、搜索页的交互细节与可用性分析

5.1 热词点击的"一键搜索"

点击热词 → 回填 keyword——"一键搜索"——"免打字"——"快捷"——"热词 = 效率"——"搜索引导"——"核心交互"。

5.2 搜索按钮的"动作"

点击搜索 → Toast——"搜索动作"——"关键字反馈"——"占位搜索"——"搜索转化"——"动作明确"。

5.3 类型标签的"分类"

试卷/题库/复习——"红色类型 tag"——"结果分类"——"快速识别"——"类型标识"——"搜索的精准"。

5.4 搜索页的"色彩心理学"

考试红（#EB5757）——"红色 = 搜索/重点"——"搜索按钮红"——"类型标签红"——"主题色应用"——"备考的检索"。

5.5 搜索页的"信息层级"

L1 搜索（Header）→ L2 热词（HotWords）→ L3 结果（ResultList）——"3 层信息"——"从搜索到热词到结果"——"检索架构"。

5.6 搜索页的"决策路径"

点热词/输入 → 搜索 → 看结果 → 下载——"4 步检索"——"从搜索到下载"——"检索转化链"。

5.7 搜索页的"对比与统一"

统一：3 结果同结构（头像/标题/类型/信息/下载）——"结果卡统一"。 对比：3 结果数据不同（标题/类型/信息）——"差异在数据"——"结构同构"。

5.8 搜索页的"demo 完整性"

搜索 + 热词 + 结果 = 完整搜索页——"可搜索可下载"——"demo 的完成度"——"检索功能完整"。

5.9 搜索页的"设计哲学"

搜索页的 3 个设计哲学：

1. 搜索优先——Header 搜索框
2. 引导优先——热词推荐
3. 结果优先——类型 + 信息展示

"搜索 + 引导 + 结果的搜索页"——"检索页的设计原则"——"从哲学看设计"。

5.10 搜索页的"系列创新"

完整搜索 Tab 是系列首次——"37 搜索页的创新"——"热词 + 结果"——"搜索页范式"——"检索功能完整"。

5.11 搜索页的"终评"

搜索框 + 热词 + 结果 = 完整搜索页——"搜索页的完成度"——"可上线级"——"系列搜索页标杆"。

5.12 搜索页的"与首页/资料呼应"

首页高数 → 搜索高数期末——"跨页协同"——"课程体系贯穿"——"数据关联"——"备考闭环"。

5.13 搜索页的"keyword 状态"

@State keyword——"搜索关键字"——"输入即更新"——"热词回填"——"搜索状态"——"状态驱动"——"检索的数据流"。

5.14 搜索页的"热词运营"

5 个热词 = 运营推荐——"热门词推荐"——"搜索引导"——"运营策略"——"高频词"——"用户需求"——"热词的运营价值"。

5.15 搜索页的"类型信息"

试卷/题库/复习——"3 类资料"——"类型标签"——"信息透明"——"结果可读"——"检索精准"——"类型的价值"。

5.16 搜索页的"emoji 体系"

🔍🔥📝📚📄⬇️——"6 个 emoji"——"搜索/热门/结果/下载"——"emoji = 功能"——"低成本视觉"——"检索的符号"。

5.17 搜索页的"透明搜索框"

透明 TextInput + 灰容器——"双层容器"——"无边框输入"——"简洁干净"——"搜索框设计"——"视觉的柔和"——"同系列搜索框"。

5.18 搜索页的"数据流"

keyword → 搜索 → 结果——"检索数据流"——"输入到结果"——"demo 静态展示"——"真实产品接口联动"——"数据的扩展"。

5.19 搜索页的"用户心智"

"搜真题"——"精准检索"——"快速找题"——"备考效率"——"场景驱动"——"搜索的价值"——"检索的便捷"。

5.21 搜索页的"最终设计评价"

搜索框 + 热词 + 结果 = 完整搜索页——"从输入到引导到结果的完整"——"可上线级"——"系列检索标杆"——"搜索页完成度评级"。

5.22 搜索页的"色彩一致性"

考试红贯穿——"搜索按钮 + 类型标签"——"品牌记忆"——"红色 = 检索"——"主题色辨识"——"色彩品牌"。

5.23 搜索页的"下载反馈"

"下载: 高数期末真题2025"——"文件名在反馈中"——"反馈的明确"——"用户确认下载对象"——"操作确定性"——"反馈的精准"。

5.24 搜索页的"demo 完整性"

搜索 + 热词 + 结果 = 完整搜索页——"功能完整"——"可搜索可下载"——"demo 的可用"——"检索完整链"。

5.25 搜索页的"跨 App 复用"

搜索框（31/36/37 共用）——"模板复用"——"一套搜索框多 App"——"组件沉淀"——"设计效率"——"系列统一"。

5.26 搜索页的"热词点击即搜"

点击热词 = 搜索——"免输入"——"一步到位"——"快捷高效"——"热词的转化"——"搜索的引导"——"核心交互"。

5.27 搜索页的"类型标签小字号"

10 号类型标签——"最小字号"——"次要但重要"——"类型标识"——"小字号的克制"——"标签设计"。

5.28 搜索页的"备考闭环"

首页选课 → 资料章节 → 搜索找题 → 下载复习——"备考完整闭环"——"检索串联"——"搜索的价值"——"备考效率"。

5.30 搜索页的"最终评级"

搜索 + 热词 + 结果 = 完整搜索页——"从结构到交互到反馈的完整"——"可上线级"——"系列搜索页标杆"——"检索完成度评级"。

六、总结：考试红 + 搜索框 + 热词 + 结果

App 37 搜索页一句话：用考试红（#EB5757）组织一个"搜索 + 热词 + 结果"的检索页——搜索 Header 用 🔍 + TextInput + "搜索"按钮提供检索入口，热门搜索用 5 个热词胶囊一键搜索引导，结果列表用浅红头像 + 标题 + 红色类型标签 + 信息 + ⬇️ 下载展示搜索结果。

3 个设计亮点：

1. 🔥 热门搜索词——5 热词一键搜索
2. 红色类型标签——试卷/题库/复习分类
3. 搜索按钮动作——keyword 回填 + Toast 反馈

主题色设计逻辑：考试红 = 检索/重点——"搜索页用考试红，搜索按钮与类型标签都用品牌色"——"主题色贯穿"。

与系列呼应：搜索框（31/36）、热词胶囊（系列胶囊）、类型标签（36 成色/35 课程）、⬇️ 下载（35/36）、@State keyword（系列）、Toast 反馈（系列）——"37 搜索把系列的搜索框 + 胶囊 + 下载手法组合出'检索'场景"。

体验细节：热词引导、类型标识、下载快捷、搜索反馈——"搜索页的核心 = 让用户'3 秒点热词 + 5 秒下结果'"。

可扩展性展望：真实搜索接口、搜索历史、结果过滤、分页、下载进度、收藏联动——"demo 的搜索页骨架完整"。

六、扩展思考：搜索页的检索架构与设计哲学

6.1 搜索页的"检索路径"

完整检索路径：

进入搜索 → 点热词（免打字）或输入关键字 → 点搜索 → 看结果（类型/信息）→ 下载

"搜索页的检索路径"——热词是"引导"、搜索框是"输入"、结果列表是"展示"——"从引导到下载"——"检索的标准范式"——"搜索页的转化链"。

6.2 搜索页的"信息架构"

3 层信息：

1. L1 搜索（Header）——"搜什么"
2. L2 热词（HotWords）——"大家都在搜"
3. L3 结果（ResultList）——"搜到什么"

"3 层渐进式"——"从搜索到热词到结果"——"检索的信息金字塔"——"用户按需深入"。

6.3 搜索页的"业务建模"

Result 模型 5 字段（id/emoji/title/type/info）——"5 字段建模"——"搜索结果的核心"——"最小可用集"——加下载量（downloads）、加预览（preview）即可扩展——"数据模型的扩展点"。

6.4 搜索页的"对比与统一"

统一：3 结果同结构（头像/标题/类型/信息/下载）——"结果卡统一"。 对比：3 结果数据不同（标题/类型/信息）——"差异在数据"——"结构同构 + 数据异构"。

6.5 搜索页的"设计哲学"

搜索页的 3 个设计哲学：

1. 搜索优先——Header 搜索框
2. 引导优先——热词推荐
3. 结果优先——类型 + 信息透明

"搜索 + 引导 + 结果的搜索页"——"检索页的设计原则"——"从哲学看设计"——"这套方法论可直接迁移到任何检索类 App"。

6.6 搜索页的"终评"

App 37 搜索页综合评估——"三区结构 + 考试红主题 + 完整检索链"——"搜索页的完成度评级"——"一个可上线级的搜索页"——"系列检索页的标杆"——"demo 的高完成度"。

七、彩蛋：搜索页的细节设计

7.1 热词的"回填逻辑"

点击热词 → keyword = 热词——"回填状态"——"一键搜索"——"免打字"——"搜索效率"——"状态驱动"——"热词的智能"。

7.2 🔥 的"热门符号"

"🔥 = 热门"——"火苗 = 热度"——"热门搜索"——"视觉的强调"——"emoji = 热度"——"区标题的视觉"。

7.3 类型标签的"三色语义"

试卷/题库/复习——"3 种类型"——"红色标签"——"统一红色"——"类型识别"——"结果分类"——"搜索的精准"。

7.4 搜索框的"透明底"

透明 TextInput 内嵌灰容器——"双层容器"——"无边框输入"——"简洁"——"融合"——"搜索框设计"——"视觉的干净"。

7.5 热词的"5 词选择"

高数期末/英语四级/数据结构真题/考研数学/大物实验——"5 个高频词"——"课程 + 考试 + 场景"——"热词的真实"——"备考需求"——"搜索的热门"。

7.6 结果的"信息组合"

PDF·12页/360题/PDF·8页——"格式 + 数量"——"文件信息"——"资料详情"——"信息透明"——"结果的可读"。

7.7 搜索按钮的"红色文字"

红色"搜索"——"主题色按钮"——"无底文字按钮"——"简洁"——"搜索动作"——"颜色 = 可点"——"按钮设计"。

7.8 搜索页的"demo 价值"

搜索 + 热词 + 结果 = 完整搜索页——"可搜索可下载"——"检索演示"——"搜索页模板"——"检索范式沉淀"。

7.9 搜索页的"备考场景"

"搜真题刷题"——"学生场景"——"精准找题"——"快速获取"——"场景驱动"——"搜索的价值"。

7.10 搜索页的"学习闭环"

搜索 → 下载 → 收藏 → 复习——"备考完整闭环"——"从检索到复习"——"搜索页的价值"——"备考全流程"。

7.11 热词胶囊的"白底边框"

白底 + 1px 边框——"热词胶囊视觉"——"无填充"——"浅色胶囊"——"与选中红区分"——"热词的次要感"——"胶囊设计"。

7.12 搜索框的"40 高"

height(40)——"搜索框高度"——"标准输入高度"——"点击区舒适"——"搜索框尺寸"——"输入体验"。

7.13 结果的"46×46 头像"

46×46 浅红——"结果头像"——"24 号 emoji"——"浅红底"——"类型标识"——"结果视觉"——"低成本头像"。

7.14 搜索页的"免打字效率"

热词一键搜索——"免输入"——"效率提升"——"快速找题"——"备考效率"——"搜索的便捷"——"热词的价值"。

7.15 搜索页的"结果数量"

3 条结果——"适量展示"——"精炼结果"——"demo 简化"——"真实产品多页"——"结果数量设计"——"搜索的演示"。

八、总结与展望

App 37 搜索页的核心价值：用考试红 + 搜索框 + 热词 + 结果，构建一个"3 秒点热词 + 5 秒下结果"的检索页——这是学习资料类 App 搜索页的标准范式。

与系列对比：

App	搜索/检索类页面	决策
31	搜索框	喝什么
36	首页搜索框	买什么书
37	搜索 Tab	搜什么题

"37 搜索页的决策是'搜哪套真题'"——"搜索页 = 精准检索"——"每个搜索页都在帮用户精准定位内容"——"37 帮用户快速找题"。

终评：考试红 + 搜索框 + 热词 + 结果 = 完整搜索页——"从配色到检索链的完整设计"——"搜索页的标杆"。

补充说明：本篇所有代码引用均基于 37-exam-bank/entry/src/main/ets/pages/Func2Tab.ets 实际源码，行号与源码一一对应；4 张实机截图分别覆盖搜索首屏、高数期末热词点击、搜索按钮点击、结果下载 ⬇️ 四种差异场景，全部含模拟器轮廓，图床域名统一为 imgbed.devzoo.top。搜索页是系列首个完整搜索 Tab，其热词一键搜索 + 类型标签 + 下载反馈是学习检索页的标准范式，可复用于任何检索类页面。