【鸿蒙 5.0 实战开发】一次开发，多端部署开发实例(长视频)-搜索页

📝往期推文全新看点（文中附带最新·鸿蒙全栈学习笔记）

🚩 鸿蒙（HarmonyOS）北向开发知识点记录~

🚩 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~

🚩 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？

🚩 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~

🚩 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？

🚩 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？

🚩 记录一场鸿蒙开发岗位面试经历~

📃 持续更新中……

---

搜索页

长视频应用搜索页需要智能响应用户的特定输入并给出提示，并提供搜索发现内容。观察搜索页在不同设备上的UX设计图，可以进行如下设计：

• 将搜索页划分为5个区域，效果图如下：

示意图	sm	md	lg
搜索页
搜索输入页
搜索结果页

• 整个页面响应式适配，借助栅格组件能力监听不同断点变化实现不同的布局效果。
• 搜索页区域1在不同断点下均占满屏幕，使用layoutWeight实现拉伸能力。
• 搜索页区域2-4在不同断点下样式基本一致，但列表显示的列数不同，使用List组件的lanes属性实现。
• 搜索页区域5使用响应式布局中的栅格布局，在不同断点下分别占用不同的栅格列数实现布局效果。

长视频应用搜索页的5个基础区域介绍及实现方案如下表所示：

区域编号	简介	实现方案
1	搜索框	layoutWeight实现拉伸能力，同 首页搜索框。
2	搜索发现	标题栏的空白区域使用Blank实现拉伸能力，内容使用 List组件 的lanes属性，在不同断点下呈2、2、3列显示。
3	热搜	页签的间距随断点变化，热搜内容使用 List组件 的lanes属性，在不同断点下呈1、2、3列显示。
4	“华”搜索智能提示	使用 List组件 的lanes属性，在不同断点下呈1、1、2列显示。
5	搜索结果	响应式布局的栅格布局，同 首页每日佳片。

在实际开发中，区域1为导航栏，区域2和3，区域4，区域5为并列的搜索页内容，所以对应的开发顺序为区域1和区域2-5。

• 搜索发现

搜索发现、热搜和“华智能提示”区域，均使用List组件，设置在不同断点下的lanes属性来实现。本章节以搜索发现区域作为示例，热搜和“华”智能提示区域的实现读者可以自行查看代码。

示意图如下：

示意图	sm	md	lg
效果图

搜索发现区域中，标题栏中间的空白区域随父容器尺寸变化而伸缩，使用Blank组件实现自适应布局的拉伸能力；List组件的lanes属性在sm和md断点下为2，lg断点下为3，实现不同布局显示。

// features/search/src/main/ets/view/SearchContent.ets
// 搜索发现区域
@Builder
searchDiscovery() {
  Row() {
    Text(SearchConstants.SEARCH_SUB_TITLES[2])
      .fontSize($r('app.float.search_history_title_font'))
      .fontWeight(CommonConstants.FONT_WEIGHT_500)
    // 实现自适应布局拉伸能力
    Blank()
    Image($r('app.media.ic_public_rotate'))
      .height($r('app.float.search_discovery_img_size'))
      .width($r('app.float.search_discovery_img_size'))
      .margin({ right: $r('app.float.search_discovery_img_margin') })
      .fillColor($r('app.color.type_tabs_font_selected'))
  }

  List() {
    ForEach(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_DISCOVERY_LARGE :
      SearchConstants.SEARCH_DISCOVERY_LARGE.slice(0, 6), (item: string, index: number) => {
      ListItem() {
        ...
      }
    }, (item: string, index: number) => index + JSON.stringify(item))
  }
  // 设置不同断点下的列数，sm和md断点下为2，lg断点下为3
  .lanes(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? SearchConstants.SEARCH_LIST_LANES[0] :
    SearchConstants.SEARCH_LIST_LANES[1])
}