鸿蒙一次开发，多端部署，响应式布局

一、定义屏幕相关常量

BreakpointConstants.ets

import BreakpointType from '../bean/BreakpointType'
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})
}

二、封装媒体查询

BreakpointSystem.ets

import mediaQuery from '@ohos.mediaquery';
import BreakPointConstants from '../constants/BreakpointConstants';export default class BreakpointSystem {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)}}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.泛型工具

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]}
}

2.使用

import BreakpointType from '../common/bean/BreakpointType'
import BreakPointConstants from '../common/constants/BreakpointConstants'
import { CommonConstants } from '../common/constants/CommonConstants'
import BreakpointSystem from '../common/utils/BreakpointSystem'
import RecordIndex from '../view/record/RecordIndex'@Entry
@Component
struct Index {@State currentIndex: number = 0private breakpointSystem: BreakpointSystem = new BreakpointSystem()@StorageProp('currentBreakpoint') currentBreakpoint: string = BreakPointConstants.BREAKPOINT_SM@Builder TabBarBuilder(title: ResourceStr, image: ResourceStr, index: number) {Column({ space: CommonConstants.SPACE_8 }) {Image(image).width(22).fillColor(this.selectColor(index))Text(title).fontSize(14).fontColor(this.selectColor(index))}}aboutToAppear() {this.breakpointSystem.register()}aboutToDisappear() {this.breakpointSystem.unregister()}selectColor(index: number) {return this.currentIndex === index ? $r('app.color.primary_color') : $r('app.color.gray')}build() {Tabs({ barPosition: BreakPointConstants.BAR_POSITION.getValue(this.currentBreakpoint) }) {TabContent() {RecordIndex()}.tabBar(this.TabBarBuilder($r('app.string.tab_record'), $r('app.media.ic_calendar'), 0))TabContent() {Text('发现页面')}.tabBar(this.TabBarBuilder($r('app.string.tab_discover'), $r('app.media.discover'), 1))TabContent() {Text('我的页面')}.tabBar(this.TabBarBuilder($r('app.string.tab_user'), $r('app.media.ic_user_portrait'), 2))}.width('100%').height('100%').onChange((index) => {this.currentIndex = index})// .vertical({sm:false,md:true,lg:true}[this.currentBreakpoint]).vertical(new BreakpointType({ sm: false, md: true, lg: true }).getValue(this.currentBreakpoint))}
}