鸿蒙开发接口UI界面：【@ohos.mediaquery (媒体查询)】

本文主要是介绍鸿蒙开发接口UI界面：【@ohos.mediaquery (媒体查询)】，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

媒体查询

说明： 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。： gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或者复制转到。

导入模块

import mediaquery from '@ohos.mediaquery'

权限

无

mediaquery.matchMediaSync

matchMediaSync(condition: string): MediaQueryListener

设置媒体查询的查询条件，并返回对应的监听句柄。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
condition	string	是	媒体事件的匹配条件，具体可参考[媒体查询语法规则]。

返回值：

类型	说明
MediaQueryListener	媒体事件监听句柄，用于注册和去注册监听回调。

示例：

let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件

MediaQueryListener

媒体查询的句柄，并包含了申请句柄时的首次查询结果。

系统能力： SystemCapability.ArkUI.ArkUI.Full

属性

名称	参数类型	可读	可写	说明
matches	boolean	是	否	是否符合匹配条件。
media	string	是	否	媒体事件的匹配条件。

on

on(type: 'change', callback: Callback<MediaQueryResult>): void

通过句柄向对应的查询条件注册回调，当媒体属性发生变更时会触发该回调。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	string	是	必须填写字符串'change'。
callback	Callback<MediaQueryResult>	是	向媒体查询注册的回调

off

off(type: 'change', callback?: Callback<MediaQueryResult>): void

通过句柄向对应的查询条件去注册回调，当媒体属性发生变更时不在触发指定的回调。

系统能力： SystemCapability.ArkUI.ArkUI.Full

参数：

参数名	类型	必填	说明
type	boolean	是	必须填写字符串'change'。
callback	Callback<MediaQueryResult>	否	需要去注册的回调，如果参数缺省则去注册该句柄下所有的回调。

示例：

  import mediaquery from '@ohos.mediaquery'let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件function onPortrait(mediaQueryResult) {if (mediaQueryResult.matches) {// do something here} else {// do something here}}listener.on('change', onPortrait) // 注册回调listener.off('change', onPortrait) // 去注册回调

MediaQueryResult

属性

名称	参数类型	可读	可写	说明
matches	boolean	是	否	是否符合匹配条件。
media	string	是	否	媒体事件的匹配条件。`HarmonyOS与OpenHarmony鸿蒙文档籽料：mau123789是v直接拿`

搜狗高速浏览器截图20240326151450.png

示例

import mediaquery from '@ohos.mediaquery'let portraitFunc = null@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() {portraitFunc = this.onPortrait.bind(this) //bind current js instancethis.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%')}
}