【HarmonyOS NEXT】一次开发多端部署（以轮播图、Tab栏、列表为例，配合栅格布局与媒体查询，进行 UI 的一多开发）

​

 关键词：一多、响应式、媒体查询、栅格布局、断点、UI

随着设备形态的逐渐增多，应用界面适配也面临着很大问题，在以往的安卓应用开发过程中，往往需要重新开发一套适用于大屏展示的应用，耗时又耗力，而鸿蒙提供响应式开发的解决方案，提供系统级的接口供开发者调用，从而使得一款应用一套代码能同时运行在不同形态的设备上，也能给用户带来很好的交互体验。

​编辑

本期文章以轮播图、Tab栏、列表为例，配合栅格布局与媒体查询，进行 UI 的一多开发。

本期完整代码已提交至gitee：one2More: 【HarmonyOS NEXT】一次开发多端部署（以轮播图、Tab栏、列表为例，配合栅格布局与媒体查询，进行 UI 的一多开发）

目录

效果预览

1. 了解断点、媒体查询、栅格布局

断点

媒体查询

栅格布局

2. 封装媒体查询监听断点工具类

3. 配合媒体查询做 Swiper() 轮播图分割效果

4. 配合媒体查询做 Tab 栏 UI 展示位置变动

5. 配合栅格布局做列表展示数量控制

总结

效果预览

​编辑

​编辑 普通屏

​编辑 折叠屏

​编辑 大屏

1. 了解断点、媒体查询、栅格布局

断点

鸿蒙提供断点以应用窗口宽度为切入点，将应用窗口在宽度维度上分成了几个不同的区间即不同的断点，不同设备会进入到不同的断点区间，在不同的区间下，我们可以可根据需要实现不同的页面布局效果。具体的断点对应的设备尺寸如下所示。

断点名称	取值范围（vp）
xs	[0, 320）
sm	[320, 600)
md	[600, 840)
lg	[840, +∞)

媒体查询

媒体查询支持监听窗口宽度、横竖屏、深浅色、设备类型等多种媒体特征，当媒体特征发生改变时同步调整页面布局。我们可以借助媒体查询能力，监听断点的变化。

栅格布局

栅格组件默认提供xs、sm、md、lg四个断点，除了默认的四个断点，还支持启用 xl 和 xxl 两个额外的断点，我们只需要在 GridRow() 组件的 breakpoints 属性中依次设置对应断点的尺寸，可自行对断点设备的尺寸进行设置从而满足自己尺寸的业务需求，当然还是更推荐使用默认的断点尺，如果使用到媒体查询，和自定义尺寸保持一致即可。

breakpoints 数组中最大可写 5 个尺寸，对应 6 个断点范围，且断点值后面必须加上vp单位。

reference 属性代表 GridRow 宽度变化随屏幕变化，还是随当前局部区域尺寸变化（因为在实际场景中，存在应用窗口尺寸不变但是局部区域尺寸发生了变化的情况，栅格组件支持以自身宽度为参照物响应断点变化具有更大的灵活性。）

栅格布局详细介绍请参考：文档中心

示例代码：

@Entry
@Component
struct GridRowSample1 {
  @State private currentBreakpoint: string = 'unknown'
  build() {
    // 修改断点的取值范围同时启用更多断点，注意，修改的断点值后面必须加上vp单位。
    GridRow({breakpoints: {value: ['600vp', '700vp', '800vp', '900vp', '1000vp'],
      reference: BreakpointsReference.WindowSize}}) {
      GridCol({span:{xs: 12, sm: 12, md: 12, lg:12, xl: 12, xxl:12}}) {
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
          Text(this.currentBreakpoint).fontSize(50).fontWeight(FontWeight.Medium)
        }
      }
    }.onBreakpointChange((currentBreakpoint: string) => {
      this.currentBreakpoint = currentBreakpoint
    })
  }
}

2. 封装媒体查询监听断点工具类

给我们的业务封装媒体查询监听断点工具类，以便后续使用，在首页生命周期过程中进行调用初始化，利用 LocalStorage 或 AppStorage 保存当前屏幕断点的名称，在应用的任意页面内通过 StorageProp 获取并动态观察屏幕设备形态状态的变化从而更新页面 UI 的展示效果，如折叠屏形态下窄屏变宽屏的使用场景，这时的断点会由 sm 变为 md。

如下代码，监听了 sm、md、lg 三种设备形态，当设备形态变化，会重新写入 storage 数据，配合状态变量即可动态更新 UI。

import mediaQuery from '@ohos.mediaquery';

@Observed
export class MediaWatching {
  private sm: string = '(width<600vp)'
  private md: string = "(600vp<=width<840vp)"
  private lg: string = "(840vp<=width)"
  private type: 'sm' | 'md' | 'lg' = 'sm'

  init() {
    console.log("luvi > mediaQueryResult change " + this.type)
    // 小尺寸屏
    const smListener = mediaQuery.matchMediaSync(this.sm)
    smListener.on('change', (mediaQueryResult) => {
      this.onPortrait(mediaQueryResult)
    })
    // 中等尺寸屏
    const mdListener = mediaQuery.matchMediaSync(this.md)
    mdListener.on('change', (mediaQueryResult) => {
      this.onPortrait(mediaQueryResult)
    })
    // 大尺寸屏
    const lgListener = mediaQuery.matchMediaSync(this.lg)
    lgListener.on('change', (mediaQueryResult) => {
      this.onPortrait(mediaQueryResult)
    })
  }

  onPortrait(mediaQueryResult: mediaQuery.MediaQueryResult) {
    console.log("luvi > mediaQueryResult " + JSON.stringify(mediaQueryResult))
    if (mediaQueryResult.matches) {
      switch (mediaQueryResult.media as string) {
        case this.sm:
          this.type = 'sm'
          break
        case this.md:
          this.type = 'md'
          break
        case this.lg:
          this.type = 'lg'
          break
        default:
          break
      }
      console.log("luvi > mediaQueryResult change " + this.type)
      AppStorage.setOrCreate("currentMediaType", this.type)
    }
  }
}

​编辑

3. 配合媒体查询做 Swiper() 轮播图分割效果

在上一步的媒体查询封装及初始化后，屏幕设备形态变化后的名称会保存在 AppStorage 中，所以我们在自定义组件中可及时获取存入的 currentMediaType ，配合 Swiper 相关接口，使用 .displayCount() 设置 Swiper 视窗内元素显示个数达到分割效果。

@Component
export struct MySwiper {
  swiperList: number[] = [1, 2, 3, 4, 5]
  // 获取当前设备断点形态
  @StorageProp("currentMediaType") currentMediaType: 'sm' | 'md' | 'lg' = 'sm'

  build() {
    Column() {
      Swiper() {
        ForEach(this.swiperList, (item: number, idx: number) => {
          Row() {
            Text(`图片${item}`)
              .textAlign(TextAlign.Center)
              .width("100%")
          }
          .borderRadius(10)
          .width("100%")
          .height(250)
          .backgroundColor(idx % 2 == 0 ? "#ddd" : "#ffb0b0b0")
        })
      }
      .itemSpace(10)
      // 根据断点设置分割个数
      // sm 小屏形态只展示 1 个，其他形态展示 2 个
      .displayCount(this.currentMediaType == "sm" ? 1 : 2)
      .autoPlay(true)
      .borderRadius(10)
      .clip(true)
    }
  }
}

4. 配合媒体查询做 Tab 栏 UI 展示位置变动

Tab 栏位置的变化与轮播图分栏同理，配合 storage 状态变量获取设备形态，对不同设备形态更改 Tab 栏标签的排列方向即可。

详细 Tab 代码可参考 gitee 源代码

// 获取当前设备断点形态
@StorageProp("currentMediaType") currentMediaType: 'sm' | 'md' | 'lg' = 'sm'

Tabs({ barPosition: BarPosition.End }) {
    TabContent() {
      // 标签页
      ...
    }

    TabContent() {
      // 标签页
      ...
    }

    TabContent() {
      // 标签页
      ...
    }
  }
  // 对不同设备形态设置不同排列方向
  .vertical(this.currentMediaType == 'sm' || this.currentMediaType == 'md' ? false : true)

5. 配合栅格布局做列表展示数量控制

栅格布局拥有独立的断点能力，不依赖与媒体查询接口，所以直接使用栅格布局的特性进行开发即可。

栅格布局主要由行和列组成，每一行可以分为若干列，在不同断点状态下展示不同数量的列数，根据这一特性，即可制作成在小屏幕上展示一列文本，在大屏幕上展示两列甚至多列文本。

所以我们可以直接对 GridRow 设置对应断点时展示的 GridCol 个数即可，无需对 GridCol 设置额外参数

GridRow({
   columns: {
     xs: 1, // 超小屏幕 1 列（如手表）
     sm: 1, // 小屏幕 1 列
     md: 2, // 中等屏幕 2 列
     lg: 3  // 大屏幕 3 列
   },
   gutter: 15 // gutter 表示各元素直接间隙尺寸
 }) {
   ForEach(this.dataList, (item: number, idx: number) => {
     GridCol() {
       Row() {
         Text(`列表${item}`)
           .textAlign(TextAlign.Center)
           .width("100%")
       }
       .borderRadius(10)
       .width("100%")
       .height(130)
       .backgroundColor("#eee")
     }
   })
 }

总结

栅格布局拥有独立的断点能力，不依赖与媒体查询接口，所以直接使用栅格布局的特性进行开发即可。

轮播图的分割效果与 Tab 栏的排列方式变化，同样可使用栅格布局进行实现，不用依赖媒体查询接口，因为栅格布局的 GridRow 组件有 onBreakpointChange 断点变化回调，可直接返回当组件宽度所在的断点区间。

GridRow(){
   ...
}
.onBreakpointChange((bp: string) => {
  // 此处回调打印 xs / sm / md ...
})

​