鸿蒙一多开发,多端部署实例——（长视频）首页

本文链接：https://blog.youkuaiyun.com/CTrup/article/details/143083664

往期推文全新看点

页面开发

本章介绍长视频应用中如何使用“一多”的布局能力，完成页面层级的一套页面、多端适配。同时介绍长视频应用中的交互开发和推荐的资源使用方式。

首页

长视频应用首页主要发挥推荐精选视频的作用，解决用户想要看视频的核心需求，所以首页内容都围绕这一功能设计。观察首页在2in1上的UX设计图，可以进行如下设计（图中为包括可滑动区域的内容）：

将应用首页划分为8个区域，效果图如下：

整个页面响应式适配，借助栅格组件能力监听不同断点变化实现不同的布局效果。
首页区域2在小设备上呈两行显示，在中设备和大设备上单行显示，断点变化时切换显示效果。
首页区域3、4使用自适应布局延伸能力随不同设备尺寸延伸或隐藏。
首页区域1，5-8使用响应式布局中的栅格断点系统，根据断点变化切换改变组件内相应的属性实现布局效果。

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

区域编号	简介	实现方案
1	底部/侧边页签	借助栅格布局监听断点变化改变位置。
2	顶部页签及搜索框	栅格布局监听断点变化实现折行显示，List组件实现延伸能力，layoutWeight实现拉伸能力。
3	Banner图	Swiper组件，指定displayCount属性实现延伸能力，设置aspectRatio属性实现缩放能力。
4	图标列表	Swiper组件，指定displayCount属性实现自适应布局延伸能力，设置aspectRatio属性实现缩放能力。
5	推荐视频	网格容器，借助栅格组件能力监听断点变化改变列数，设置aspectRatio属性实现缩放能力。
6	新片发布	网格容器，借助栅格组件能力监听断点变化改变列数，设置aspectRatio属性实现缩放能力。
7	每日佳片	利用响应式布局的栅格布局，结合 Stack组件和 Grid组件，设置aspectRatio属性实现缩放能力。
8	往期回顾	响应式布局的栅格布局，设置aspectRatio属性实现缩放能力。

在实际开发中，区域1为外层导航栏，区域2为内层导航栏，区域3-8为并列的首页内容，所以对应的开发顺序为区域1、区域2和区域3-8。另外，为了提升用户的使用体验，首页设计了额外的功能，包括首页社区页签的沉浸式设计，2in1首页Banner图的排版创新，首页推荐视频区域长按预览，首页推荐视频区域的缩放。

底部/侧边页签

底部/侧边页签区域，使用Tabs组件，设置在不同断点下的vertical属性，实现显示在首页的不同位置。在sm和md断点下，页签显示在底部，高度为56vp；在lg断点下页签显示在左侧，宽度为96vp，且页签居中显示。

示意图如下：

// features/home/src/main/ets/view/Home.ets
// 底部/侧边页签区域
Tabs({
  // lg断点时，页签栏在侧边；sm、md断点时，页签栏在底部
  barPosition: this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarPosition.Start : BarPosition.End
}) {
  // ...
}
// 底部页签大小的变换
.barWidth(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? $r('app.float.bottom_tab_bar_width_lg') :
  CommonConstants.FULL_PERCENT)
.barHeight(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? CommonConstants.FULL_PERCENT :
  (deviceInfo.deviceType === CommonConstants.DEVICE_TYPES[0] ? $r('app.float.tab_size_lg') :
  $r('app.float.tab_size')))
// 设置不同断点下页签的布局模式
.barMode(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG ? BarMode.Scrollable : BarMode.Fixed,
  { nonScrollableLayoutStyle: LayoutStyle.ALWAYS_CENTER })
// lg断点时为纵向Tabs，sm、md断点时为横向Tabs
.vertical(this.currentBreakpoint === BreakpointConstants.BREAKPOINT_LG)

顶部页签及搜索框

不同断点下，顶部页签和搜索框占用不同栅格列数，使用栅格布局实现在sm断点下分两行显示，在md和lg断点下单行显示。根据设计将栅格在sm、md和lg的断点上分别划分为4列、12列、12列。示意图如下：

// features/home/src/main/ets/view/HomeHeader.ets
// 顶部页签及搜索框
build() {
  GridRow({
    columns: {
      // 栅格数4、12、12列
      sm: CommonConstants.GRID_ROW_COLUMNS[2],
      md: CommonConstants.GRID_ROW_COLUMNS[0],
      lg: CommonCons