鸿蒙开辟进阶（HarmonyOS）多端结构之响应式结构

  鸿蒙NEXT开辟实战往期必看文章：
一分钟相识”纯血版！鸿蒙HarmonyOS Next应用开辟！
“非常详细的” 鸿蒙HarmonyOS Next应用开辟学习门路！（从零基础入门到精通）
HarmonyOS NEXT应用开辟案例实践总团结（持续更新......）
HarmonyOS NEXT应用开辟性能优化实践总结（持续更新......）

---

响应式筹划（Responsive Web Design，简称RWD）在web网站筹划领域是一种网页筹划方法论，旨在让网站在不同设备和屏幕尺寸上都能提供良好的阅读和交互体验，而无需为每一个新设备或屏幕尺寸创建单独的版本。这种筹划方法的核心在于页面结构和内容可以根据用户所使用的设备特性（如屏幕尺寸、分辨率、方向）进行灵活调整。在web网站筹划中，诞生了很多优秀的响应式UI框架，例如Bootstrap 响应式UI框架，通过媒体查询、断点控制以及内置的响应式组件，实现响应式页面结构。

Bootstrap中的断点

响应式筹划在鸿蒙体系（HarmonyOS）中的应用主要体现在UI开辟上，目的是确保应用能够在搭载鸿蒙体系的多种设备上，包括不同屏幕尺寸和分辨率的设备，提供一致且优化的用户体验。鸿蒙体系为此提供了一系列的响应式结构能力和工具，用来实现多端结构。
鸿蒙中的响应式筹划特点包括：

• 栅格断点体系：鸿蒙体系提供了一套栅格体系，类似于Web筹划中的栅格结构，资助开辟者界说页面结构在不同屏幕宽度下的断点。通过设置这些断点，应用可以在从小屏到大屏的不同设备上主动调整结构结构，以顺应不同的表现需求。
  
• 媒体查询：类似于Web CSS中的媒体查询，鸿蒙体系允许开辟者根据设备的特性（如屏幕尺寸、分辨率等）编写条件语句来应用不同的结构规则或样式。这样可以精确控制不同场景下的界面呈现。
  
• 响应式组件：鸿蒙内置的一些组件支持响应式结构，例如： Tabs、Swiper、Grid、List、GridRow，通过断点设置可以实现不同的展示结果。
  

断点
  断点以应用窗口宽度为切入点，将应用窗口在宽度维度上分成了几个不同的区间即不同的断点，在不同的区间下，开辟者可根据需要实现不同的页面结构结果。
断点名称取值范围（vp）xs[0, 320）sm[320, 600)md[600, 840)lg[840, +∞)  鸿蒙中的断点

鸿蒙体系提供了多种方法，开辟者判断当前是哪种断点，根据断点环境调整app的结构。
我们以媒体查询为例：
媒体查询通过mediaquery模块接口，设置查询条件并绑定回调函数，在对应的条件的回调函数里更改页面结构或者实现业务逻辑，实现页面的响应式筹划。详细步骤如下：
1. 首先导入媒体查询模块。

1. import mediaquery from '@ohos.mediaquery';

复制代码

2. 通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener。例如监听横屏变乱：

1. let listener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)');

复制代码

3. 给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变革时执行回调函数。在回调函数内，根据不同设备状态更改页面结构或者实现业务逻辑。

1. onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) {
2.   if (mediaQueryResult.matches as boolean) {
3.     // do something here
4.   } else {
5.     // do something here
6.   }
7. }
9. listener.on('change', onPortrait);

复制代码

媒体查询条件由媒体类型、逻辑操作符、媒体特征组成，其中媒体类型可省略，逻辑操作符用于毗连不同媒体类型与媒体特征，其中，媒体特征要使用“()”包裹且可以有多个。
语法规则包括媒体类型（media-type）、媒体逻辑操作（media-logic-operations）和媒体特征（media-feature）。

1. [media-type] [media-logic-operations] [(media-feature)]

复制代码

例如：断点的写法

1. mediaquery.matchMediaSync('(320vp<width<600vp)')

复制代码

根据媒体查询的根本使用方法，我们简朴使用一下：

1. import mediaquery from '@ohos.mediaquery'@Entry@Componentstruct Index {    @State currentBreakpoint: string = 'md';  private xsListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(0vp<width<320vp)');  private smListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(320vp<width<600vp)');  private mdListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(600vp<width<840vp)');  private lgListener: mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(840vp<=width)');  registerBreakpoint(){    if (this.xsListener.matches) {      this.updateCurrentBreakpoint('xs')    }    if (this.smListener.matches) {      this.updateCurrentBreakpoint('sm')    }    if (this.mdListener.matches) {      this.updateCurrentBreakpoint('md')    }    if (this.lgListener.matches) {      this.updateCurrentBreakpoint('lg')    }  }  updateCurrentBreakpoint(breakpoint: string) {    if (this.currentBreakpoint !== breakpoint) {      this.currentBreakpoint = breakpoint;    }  }  aboutToAppear(): void {    this.registerBreakpoint();  }  build() {    RelativeContainer() {      Text(this.currentBreakpoint)        .id('HelloWorld')        .fontSize(50)        .fontWeight(FontWeight.Bold)        .alignRules({          center: { anchor: '__container__', align: VerticalAlign.Center },          middle: { anchor: '__container__', align: HorizontalAlign.Center }        })    }    .height('100%')    .width('100%')  }}

复制代码

可以看到不同尺寸设备上，获取到的断点是不同的：

在鸿蒙的一些组件中内置了一些属性，可以根据不同的属性设置实现不同的结构展示，例如Tabs组件，通过barPosition、vertical的不同组合可以实现不同屏幕的适配。

团结前面的媒体查询断点代码和Tabs组件，通过代码详细实现一下：

1. build() {
2.     Tabs({ barPosition: this.currentBreakpoint == 'lg' ? BarPosition.Start: BarPosition.End }) {
3.       TabContent() {
4.         Text('首页的内容' + this.currentBreakpoint).fontSize(30)
5.       }
6.       .tabBar('首页')
8.       TabContent() {
9.         Text('推荐的内容').fontSize(30)
10.       }
11.       .tabBar('推荐')
13.       TabContent() {
14.         Text('发现的内容').fontSize(30)
15.       }
16.       .tabBar('发现')
18.       TabContent() {
19.         Text('我的内容').fontSize(30)
20.       }
21.       .tabBar("我的")
22.     }
23.     .vertical(this.currentBreakpoint == 'lg' ? true : false)
24.     .barWidth(this.currentBreakpoint == 'lg' ? 100 : '')
25.     .barHeight(this.currentBreakpoint == 'lg' ? 200 : '')
26.   }

复制代码

实现结果如下图：

可以看到在手机和折叠屏上tabbar在底部，在大屏平板上tabbar在右侧，这样方便用户手持平板操作。
在鸿蒙体系中，还有其他一些组件团结媒体查询可以实现不同的展示结果，例如: Swiper、Grid、List等，开辟者可以根据这些组件构建多端结构。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。