媒体查询
说明： 从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直接拿 |
示例
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%')}
}鸿蒙Next核心技术分享
1、鸿蒙基础知识←《鸿蒙NEXT星河版开发学习文档》
2、鸿蒙ArkUI←《鸿蒙NEXT星河版开发学习文档》
3、鸿蒙进阶技术←《鸿蒙NEXT星河版开发学习文档》
4、鸿蒙就业高级技能←《鸿蒙NEXT星河版开发学习文档》
5、鸿蒙多媒体技术←《鸿蒙NEXT星河版开发学习文档》
6、鸿蒙南向驱动开发←《鸿蒙NEXT星河版开发学习文档》
7、鸿蒙南向内核设备开发←《鸿蒙NEXT星河版开发学习文档》
8、鸿蒙系统裁剪与移植←《鸿蒙NEXT星河版开发学习文档》
