js-apis-mediaquery.md 4.7 KB
Newer Older
1
# @ohos.mediaquery (媒体查询)
Z
zengyawen 已提交
2

T
explain  
tianyu 已提交
3 4
提供根据不同媒体类型定义不同的样式。

H
HelloCrease 已提交
5
> **说明:**
H
HelloCrease 已提交
6
>
Z
zengyawen 已提交
7
> 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
Z
zengyawen 已提交
8

Z
zengyawen 已提交
9 10

## 导入模块
Z
zengyawen 已提交
11

H
HelloCrease 已提交
12
```js
Z
zengyawen 已提交
13 14 15
import mediaquery from '@ohos.mediaquery'
```

Z
zengyawen 已提交
16 17 18 19

## mediaquery.matchMediaSync

matchMediaSync(condition: string): MediaQueryListener
Z
zengyawen 已提交
20 21 22

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

L
luoying_ace_admin 已提交
23 24
**系统能力:** SystemCapability.ArkUI.ArkUI.Full

H
HelloCrease 已提交
25
**参数:** 
26

H
HelloCrease 已提交
27 28
| 参数名       | 类型     | 必填   | 说明                                       |
| --------- | ------ | ---- | ---------------------------------------- |
H
HelloCrease 已提交
29
| condition | string | 是    | 媒体事件的匹配条件,具体可参考[媒体查询语法规则](../../ui/ui-ts-layout-mediaquery.md#语法规则)。 |
Z
zengyawen 已提交
30

H
HelloCrease 已提交
31
**返回值:** 
32

H
HelloCrease 已提交
33 34 35
| 类型                 | 说明                     |
| ------------------ | ---------------------- |
| MediaQueryListener | 媒体事件监听句柄,用于注册和去注册监听回调。 |
Z
zengyawen 已提交
36

H
HelloCrease 已提交
37
**示例:** 
38 39

```js
H
HelloCrease 已提交
40
let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件
41
```
Z
zengyawen 已提交
42 43 44


## MediaQueryListener
Z
zengyawen 已提交
45 46 47

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

L
luoying_ace_admin 已提交
48
**系统能力:** SystemCapability.ArkUI.ArkUI.Full
Z
zengyawen 已提交
49 50 51

### 属性

Y
yamila 已提交
52 53 54 55
| 名称    | 类型    | 可读 | 可写 | 说明                 |
| ------- | ------- | ---- | ---- | -------------------- |
| matches | boolean | 是   | 否   | 是否符合匹配条件。   |
| media   | string  | 是   | 否   | 媒体事件的匹配条件。 |
Z
zengyawen 已提交
56 57 58 59 60


### on

on(type: 'change', callback: Callback<MediaQueryResult>): void
Z
zengyawen 已提交
61 62 63

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

L
luoying_ace_admin 已提交
64 65
**系统能力:** SystemCapability.ArkUI.ArkUI.Full

H
HelloCrease 已提交
66
**参数:** 
67

H
HelloCrease 已提交
68 69 70 71
| 参数名      | 类型                               | 必填   | 说明               |
| -------- | -------------------------------- | ---- | ---------------- |
| type     | string                           | 是    | 必须填写字符串'change'。 |
| callback | Callback<MediaQueryResult> | 是    | 向媒体查询注册的回调       |
Z
zengyawen 已提交
72

H
HelloCrease 已提交
73
**示例:** 
74

Z
zengyawen 已提交
75 76 77 78 79 80
  详见[off示例](#off)


### off

off(type: 'change', callback?: Callback<MediaQueryResult>): void
Z
zengyawen 已提交
81 82

通过句柄向对应的查询条件去注册回调,当媒体属性发生变更时不在触发指定的回调。
L
luoying_ace_admin 已提交
83 84 85

**系统能力:** SystemCapability.ArkUI.ArkUI.Full

H
HelloCrease 已提交
86
**参数:** 
87

Y
yamila 已提交
88 89 90 91
| 参数名   | 类型                             | 必填 | 说明                                                       |
| -------- | -------------------------------- | ---- | ---------------------------------------------------------- |
| type     | string                           | 是   | 必须填写字符串'change'。                                   |
| callback | Callback<MediaQueryResult> | 否   | 需要去注册的回调,如果参数缺省则去注册该句柄下所有的回调。 |
H
HelloCrease 已提交
92 93

**示例:** 
94

H
HelloCrease 已提交
95
  ```js
96 97 98 99 100 101 102 103 104 105
    import mediaquery from '@ohos.mediaquery'
    
    let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件
    function onPortrait(mediaQueryResult) {
        if (mediaQueryResult.matches) {
            // do something here
        } else {
            // do something here
        }
    }
H
HelloCrease 已提交
106 107
    listener.on('change', onPortrait) // 注册回调
    listener.off('change', onPortrait) // 去注册回调
Z
zengyawen 已提交
108
  ```
Z
zengyawen 已提交
109

Z
zengyawen 已提交
110 111
## MediaQueryResult

Y
yamila 已提交
112 113 114 115
用于执行媒体查询操作。

**系统能力:** SystemCapability.ArkUI.ArkUI.Full

Z
zengyawen 已提交
116 117 118

### 属性

Y
yamila 已提交
119 120 121 122
| 名称    | 类型    | 可读 | 可写 | 说明                 |
| ------- | ------- | ---- | ---- | -------------------- |
| matches | boolean | 是   | 否   | 是否符合匹配条件。   |
| media   | string  | 是   | 否   | 媒体事件的匹配条件。 |
Z
zengyawen 已提交
123 124 125


### 示例
Z
zengyawen 已提交
126

H
HelloCrease 已提交
127
```ts
Z
zengyawen 已提交
128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148
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() {
Y
yamila 已提交
149
    let portraitFunc = this.onPortrait.bind(this) // bind current js instance
Z
zengyawen 已提交
150 151 152 153 154 155 156 157 158 159
    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%')
  }
}
160
```