【鸿蒙 HarmonyOS 4.0】多设备响应式布局

一、背景

在渲染页面时，需要根据不同屏幕大小渲染出不同的效果，动态的判断设备屏幕大小，便需要采用多设备响应式布局。这种设计方法能够动态适配各种屏幕大小，确保网站在不同设备上都能呈现出最佳的效果。

二、媒体查询（mediaquery）

媒体查询作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。媒体查询常用于下面两种场景：

1. 针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局。

2.1、引入与使用流程

设备状态	媒体查询条件
SM	(320vp<=width<600vp)
MD	(600vp<=width<840vp)
LG	(840vp<=width)

①导入媒体查询模块

import mediaquery from '@ohos.mediaquery';

②设置媒体查询条件，并获取对应的listener

let listener = mediaquery.matchMediaSync('(320vp<=width<600vp)');

③给listener设置回调函数，当设备状态变化时会执行回调函数

//设置监听回调函数
listener.on('change',result => {//判断是否满足媒体查询条件if(result.matches){//记录当前设备状态}
})

④将设备状态记录到全局状态中

AppStorage.SetOrCreate('currentBreakpoint','SM')

@StorageProp('currentBreakpoint') currentBreakpoint:string = 'SM'

2.2、具体实现

2.2.1、案例说明

⭐背景情况：在渲染页面时，不同屏幕大小渲染出效果是一样的，tabs都是在底部

⭐期望：根据不同屏幕大小渲染出不同的效果，tabs动态展示

2.2.2、实现步骤

①定义不同大小屏幕设备的Breakpoints 标记文件

import BreakpointType from '../bean/BreanpointType';
export default class BreakpointConstants {/*** 小屏幕设备的 Breakpoints 标记.*/static readonly BREAKPOINT_SM: string = 'sm';/*** 中等屏幕设备的 Breakpoints 标记.*/static readonly BREAKPOINT_MD: string = 'md';/*** 大屏幕设备的 Breakpoints 标记.*/static readonly BREAKPOINT_LG: string = 'lg';/*** 当前设备的 breakpoints 存储key*/static readonly CURRENT_BREAKPOINT: string = 'currentBreakpoint';/*** 小屏幕设备宽度范围.*/static readonly RANGE_SM: string = '(320vp<=width<600vp)';/*** 中屏幕设备宽度范围.*/static readonly RANGE_MD: string = '(600vp<=width<840vp)';/*** 大屏幕设备宽度范围.*/static readonly RANGE_LG: string = '(840vp<=width)';static readonly BAR_POSITION: BreakpointType<BarPosition> = new BreakpointType({sm: BarPosition.End,md: BarPosition.Start,lg: BarPosition.Start,})
}

②定义媒体查询工具类，用来完成监听器的自定义和使用，并将监听器进行存储

import mediaQuery from '@ohos.mediaquery';
import BreakpointConstants from '../constants/BreakpointConstants'export default class BreakpointSystem{//定义3个屏幕监听器private smListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_SM)private mdListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_MD)private lgListener: mediaQuery.MediaQueryListener = mediaQuery.matchMediaSync(BreakpointConstants.RANGE_LG)//定义回调函数smListenerCallback(result: mediaQuery.MediaQueryResult){if(result.matches){this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_SM)}}mdListenerCallback(result: mediaQuery.MediaQueryResult){if(result.matches){this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_MD)}}lgListenerCallback(result: mediaQuery.MediaQueryResult){if(result.matches){this.updateCurrentBreakpoint(BreakpointConstants.BREAKPOINT_LG)}}//定义存储函数，以上3个函数中调用updateCurrentBreakpoint(breakpoint: string){AppStorage.SetOrCreate(BreakpointConstants.CURRENT_BREAKPOINT, breakpoint)}//监听register(){this.smListener.on('change', this.smListenerCallback.bind(this))this.mdListener.on('change', this.mdListenerCallback.bind(this))this.lgListener.on('change', this.lgListenerCallback.bind(this))}//取消监听unregister(){this.smListener.off('change', this.smListenerCallback.bind(this))this.mdListener.off('change', this.mdListenerCallback.bind(this))this.lgListener.off('change', this.lgListenerCallback.bind(this))}
}/** 1、定义3个屏幕监听器* 2、分别监听不同的屏幕获取宽度范围* （先定义3个屏幕的函数，定义函数时使用AppStorage进行存储）+（再进行绑定，利用on监听，off取消监听）* */

③定义标记类型，页面中使用

//定义标记类型
declare interface BreakpointTypeOptions<T>{sm?:T,md?:T,lg?:T
}export default class BreakpointType<T>{options: BreakpointTypeOptions<T>constructor(options: BreakpointTypeOptions<T>) {this.options = options}getValue(breakpoint: string): T{return this.options[breakpoint]}
}

④在页面中使用，不同屏幕展示不同大小

说明：

在首页中使用breakpointSystem完成初始化

在当前组件构建之前，去调用，完成注册；在组件销毁时，完成取消注册

tabs根据不同屏幕大小来显示方向位置

2.2.3、最终效果