鸿蒙开发的横竖屏切换隶属于mediaquery模块,通过注册监听,回调方法来让我们处理横竖屏切换后的业务逻辑。
import mediaquery from '@ohos.mediaquery'
@Entry
@Component
struct OfficalMediaqueryPage {
listener = mediaquery.matchMediaSync('(orientation: landscape)')
build() {
Column({space:30}) {
Text('开始监听')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
console.log('开始监听')
this.listenScreenDirection()
})
Text('去掉监听')
.fontSize(50)
.fontWeight(FontWeight.Bold)
.onClick(() => {
console.log('去掉监听')
this.unlistenScreenDirection()
})
}
.width('100%')
.backgroundColor(this.color)
.height('100%')
}
//监听屏幕旋转
listenScreenDirection() {
this.listener.on('change',this.onScreenLandscape)
}
//去掉监听屏幕旋转
unlistenScreenDirection() {
this.listener.off('change',this.onScreenLandscape)
}
//横竖屏切换回调
onScreenLandscape(mediaQueryResult) {
if (mediaQueryResult.matches) {//横屏
console.log('mediaQueryResult matches')
} else {//竖屏
console.log('mediaQueryResult not matches')
}
}
}
其中mediaQueryResult.matches是boolean类型,表示回调的结果是否和matchMediaSync('(orientation: landscape)') 结果一致。