import { mediaquery } from "@kit.ArkUI";
@Entry
@ComponentV2
struct MPage {
@Local str: string = ''
listener: mediaquery.MediaQueryListener =
this.getUIContext().getMediaQuery().matchMediaSync('(320vp<=width<600vp)');
listener2: mediaquery.MediaQueryListener =
this.getUIContext().getMediaQuery().matchMediaSync('(600vp<=width<840vp)');
listener3: mediaquery.MediaQueryListener =
this.getUIContext().getMediaQuery().matchMediaSync('(840vp<=width)');
onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) {
if (mediaQueryResult.matches as boolean) {
// do something here
console.log(`===sm`)
this.str = 'sm'
} else {
// do something here
}
}
onPortrait2(mediaQueryResult: mediaquery.MediaQueryResult) {
if (mediaQueryResult.matches as boolean) {
// do something here
console.log(`===md`)
this.str = 'md'
} else {
// do something here
}
}
//
onPortrait3(mediaQueryResult: mediaquery.MediaQueryResult) {
if (mediaQueryResult.matches as boolean) {
// do something here
console.log(`===lg`)
this.str = 'lg'
} else {
// do something here
}
}
aboutToAppear(): void {
this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => {
this.onPortrait(mediaQueryResult)
});
this.listener2.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => {
this.onPortrait2(mediaQueryResult)
});
this.listener3.on('change', (mediaQueryResult: mediaquery.MediaQueryResult) => {
this.onPortrait3(mediaQueryResult)
});
}
aboutToDisappear(): void {
this.listener.off('change')
this.listener2.off('change')
this.listener3.off('change')
}
build() {
Column() {
Text('断点' + this.str)
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
.padding(20)
}
}
