【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'breakcase this.md:this.type = 'md'breakcase this.lg:this.type = 'lg'breakdefault: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 ...
})