1# @ohos.mediaquery (媒体查询) 2 3提供根据不同媒体类型定义不同的样式。 4 5> **说明：** 6> 7> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> 该模块不支持在[UIAbility](./js-apis-app-ability-uiAbility.md)的文件声明处使用，即不能在UIAbility的生命周期中调用，需要在创建组件实例后使用。 10> 11> 本模块功能依赖UI的执行上下文，不可在UI上下文不明确的地方使用，参见[UIContext](./js-apis-arkui-UIContext.md#uicontext)说明。 12> 13> 从API version 10开始，可以通过使用[UIContext](./js-apis-arkui-UIContext.md#uicontext)中的[getMediaQuery](./js-apis-arkui-UIContext.md#getmediaquery)方法获取当前UI上下文关联的[MediaQuery](./js-apis-arkui-UIContext.md#mediaquery)对象。 14 15 16## 导入模块 17 18```ts 19import mediaquery from '@ohos.mediaquery' 20``` 21 22 23## mediaquery.matchMediaSync 24 25matchMediaSync(condition: string): MediaQueryListener 26 27设置媒体查询的查询条件，并返回对应的监听句柄。 28 29**系统能力：** SystemCapability.ArkUI.ArkUI.Full 30 31**参数：** 32 33| 参数名 | 类型 | 必填 | 说明 | 34| --------- | ------ | ---- | ------------------------------------------------------------ | 35| condition | string | 是 | 媒体事件的匹配条件，具体可参考[媒体查询语法规则](../../ui/arkts-layout-development-media-query.md#语法规则)。 | 36 37**返回值：** 38 39| 类型 | 说明 | 40| ------------------ | -------------------------------------------- | 41| MediaQueryListener | 媒体事件监听句柄，用于注册和去注册监听回调。 | 42 43**示例：** 44 45```ts 46import mediaquery from '@ohos.mediaquery' 47let listener:mediaquery.MediaQueryListener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 48``` 49 50 51## MediaQueryListener 52 53媒体查询的句柄，并包含了申请句柄时的首次查询结果。媒体查询根据设置的条件语句，比如'(width <= 600vp)'，比较系统信息，若首次查询时相关信息未初始化，matches返回false。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57### 属性 58 59| 名称 | 类型 | 可读 | 可写 | 说明 | 60| ------- | ------- | ---- | ---- | -------------------- | 61| matches | boolean | 是 | 否 | 是否符合匹配条件。 | 62| media | string | 是 | 否 | 媒体事件的匹配条件。 | 63 64 65### on 66 67on(type: 'change', callback: Callback<MediaQueryResult>): void 68 69通过句柄向对应的查询条件注册回调，当媒体属性发生变更时会触发该回调。 70 71**系统能力：** SystemCapability.ArkUI.ArkUI.Full 72 73**参数：** 74 75| 参数名 | 类型 | 必填 | 说明 | 76| -------- | -------------------------------- | ---- | ------------------------ | 77| type | string | 是 | 必须填写字符串'change'。 | 78| callback | Callback<MediaQueryResult> | 是 | 向媒体查询注册的回调 | 79 80**示例：** 81 82 详见[off示例](#off)。 83 84 85### off 86 87off(type: 'change', callback?: Callback<MediaQueryResult>): void 88 89通过句柄向对应的查询条件取消注册回调，当媒体属性发生变更时不再触发指定的回调。 90 91**系统能力：** SystemCapability.ArkUI.ArkUI.Full 92 93**参数：** 94 95| 参数名 | 类型 | 必填 | 说明 | 96| -------- | -------------------------------- | ---- | ---------------------------------------------------------- | 97| type | string | 是 | 必须填写字符串'change'。 | 98| callback | Callback<MediaQueryResult> | 否 | 需要去注册的回调，如果参数缺省则去注册该句柄下所有的回调。 | 99 100**示例：** 101 102 ```ts 103 import mediaquery from '@ohos.mediaquery' 104 105 let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件 106 function onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) { 107 if (mediaQueryResult.matches) { 108 // do something here 109 } else { 110 // do something here 111 } 112 } 113 listener.on('change', onPortrait) // 注册回调 114 listener.off('change', onPortrait) // 去取消注册回调 115 ``` 116 117## MediaQueryResult 118 119用于执行媒体查询操作。 120 121**系统能力：** SystemCapability.ArkUI.ArkUI.Full 122 123 124### 属性 125 126| 名称 | 类型 | 可读 | 可写 | 说明 | 127| ------- | ------- | ---- | ---- | -------------------- | 128| matches | boolean | 是 | 否 | 是否符合匹配条件。 | 129| media | string | 是 | 否 | 媒体事件的匹配条件。 | 130 131 132### 示例 133 134```ts 135import mediaquery from '@ohos.mediaquery' 136 137 138@Entry 139@Component 140struct MediaQueryExample { 141 @State color: string = '#DB7093' 142 @State text: string = 'Portrait' 143 listener = mediaquery.matchMediaSync('(orientation: landscape)') 144 145 onPortrait(mediaQueryResult:mediaquery.MediaQueryResult) { 146 if (mediaQueryResult.matches) { 147 this.color = '#FFD700' 148 this.text = 'Landscape' 149 } else { 150 this.color = '#DB7093' 151 this.text = 'Portrait' 152 } 153 } 154 155 aboutToAppear() { 156 let portraitFunc = (mediaQueryResult:mediaquery.MediaQueryResult):void=>this.onPortrait(mediaQueryResult) // bind current js instance 157 this.listener.on('change', portraitFunc) 158 } 159 160 build() { 161 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 162 Text(this.text).fontSize(24).fontColor(this.color) 163 } 164 .width('100%').height('100%') 165 } 166} 167```