媒体查询常用于下面两种场景：
- 针对设备和应用的属性信息（比如显示区域、深浅色、分辨率），设计出相匹配的布局。
- 当屏幕发生动态改变时（比如分屏、横竖屏切换），同步更新应用的页面布局
- 注意：该模块不支持在UIAbility的文件声明处使用，即不能在UIAbility的生命周期中调用，需要在创建组件实例后使用。
引入与使用流程
媒体查询通过mediaquery模块接口，设置查询条件并绑定回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑，实现页面的响应式设计。具体步骤如下：
- 首先导入媒体查询模块
import mediaquery from '@ohos.mediaquery';
- 通过matchMediaSync接口设置媒体查询条件，保存返回的条件监听句柄listener。例如监听横屏事件：
let listener = mediaquery.matchMediaSync('(orientation: landscape)');
- 给条件监听句柄listener绑定回调函数onPortrait，当listener检测设备状态变化时执行回调函数。在回调函数内，根据不同设备状态更改页面布局或者实现业务逻辑。
onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) {
// do something here
} else {
// do something here
}
}
listener.on('change', onPortrait);
- demo
import mediaquery from '@ohos.mediaquery'
@Entry
@Component
struct MediaQueryExample {
@State color: string = '#DB7093'
@State text: string = 'Portrait'
listener = mediaquery.matchMediaSync('(orientation: landscape)')
onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) {
this.color = '#FFD700'
this.text = 'Landscape'
} else {
this.color = '#DB7093'
this.text = 'Portrait'
}
}
aboutToAppear() {
let portraitFunc = this.onPortrait.bind(this) // bind current js instance
this.listener.on('change', portraitFunc)
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(this.text).fontSize(24).fontColor(this.color)
}
.width('100%').height('100%')
}
}
