MiniX自绘渲染跨平台框架
  • 框架说明
  • 声明式开发范式
  • 内置Api
指南
接口
  • Minix CLI
示例
  • 类Web框架

    • 框架说明
    • 类Web开发范式
    • 内置Api
  • 指南
  • 组件
  • 接口
  • 示例
  • 规范
  • DophinHybrid

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • DolphinWeex

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • 发布消息
  • 常见问题
  • 更新日志
  • 框架说明
  • 声明式开发范式
  • 内置Api
指南
接口
  • Minix CLI
示例
  • 类Web框架

    • 框架说明
    • 类Web开发范式
    • 内置Api
  • 指南
  • 组件
  • 接口
  • 示例
  • 规范
  • DophinHybrid

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • DolphinWeex

    • 快速上手 (opens new window)
    • UI 组件库 (opens new window)
    • jsBridge 接口 (opens new window)
  • 发布消息
  • 常见问题
  • 更新日志
  • 接口参考

    • UI 界面

      • @ohos.animator (动画)
      • @ohos.mediaquery (媒体查询)
        • 导入模块
        • 权限
        • mediaquery.matchMediaSync
        • MediaQueryListener
        • MediaQueryResult
      • @ohos.prompt (弹窗)
      • @ohos.router (页面路由)
      • @ohos.uiAppearance(用户界面外观)
    • 图形图像

    • 媒体

    • 资源管理

    • 语言基础类库

    • 网络管理

    • 数据管理

    • 设备管理

    • 公共事件与通知

# @ohos.mediaquery (媒体查询)

提供根据不同媒体类型定义不同的样式。

说明:

从 API Version 7 开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

# 导入模块

import mediaquery from "@ohos.mediaquery";
1

# 权限

无

# mediaquery.matchMediaSync

matchMediaSync(condition: string): MediaQueryListener

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

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

参数:

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

返回值:

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

示例:

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

# 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

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); // 去注册回调
1
2
3
4
5
6
7
8
9
10
11
12

# MediaQueryResult

# 属性

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

# 示例

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%')
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32