五笔打字通主页
在实际应用开发过程中,开发者常常需要针对不同类型设备或同一类型设备的不同状态来修改应用的样式。媒体查询提供了丰富的媒体特征监听能力,可以监听应用显示区域变化、横竖屏、深浅色、设备类型等等,因此在应用开发过程中使用的非常广泛。
下面是媒体查询,监控宽度的变化。石川,arkts,鸿蒙,wb98.com
import { mediaquery } from '@kit.ArkUI'; //导入媒体查询模块 @Entry @Component struct Page8 { @State message: string = ''; @State backColor: Color = Color.White //通过 matchMediasync 接口设置媒体查询条件 //屏幕尺寸在320到600,sm,手机竖屏为sm,横屏就是md private listener: mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync('(600vp>width>320vp)') // 屏幕尺寸小于320,xs,智能手表 private listener1: mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync('(width<320vp)') // 屏幕尺寸大于600,md,平板 private listener2: mediaquery.MediaQueryListener = this.getUIContext().getMediaQuery().matchMediaSync('(width>600vp)') aboutToAppear(): void { //所有监听绑定事件 - wb98.com this.listener.on('change', (result: mediaquery.MediaQueryResult) => { if (result.matches) { this.backColor = Color.Yellow this.message = 'sm' } }) this.listener1.on('change', (result: mediaquery.MediaQueryResult) => { if (result.matches) { this.backColor = Color.Red this.message = 'xs' } }) this.listener2.on('change', (result: mediaquery.MediaQueryResult) => { if (result.matches) { this.backColor = Color.Green this.message = 'md' } }) } aboutToDisappear(): void { //解绑监听 - wb86.com this.listener.off('change') this.listener1.off('change') this.listener2.off('change') } build() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Medium) } .width('100%') .height('100%') .backgroundColor(this.backColor) } }
来源:济亨网
本文链接:https://www.wb98.com/post/378.html