0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

鸿蒙开发UI界面——@ohos.mediaquery (媒体查询)

王程 来源:jf_75796907 作者:jf_75796907 2024-02-22 16:46 次阅读

导入模块

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): void

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

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

参数:

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

示例:

详见off示例。

off

off(type: ‘change’, callback?: Callback): void

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

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

参数名 类型 必填 说明
type string 必须填写字符串’change’。
callback Callback 需要去注册的回调,如果参数缺省则去注册该句柄下所有的回调。

示例:

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

用于执行媒体查询操作。

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

属性

名称 类型 可读 可写 说明
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%')
  }
}


审核编辑 黄宇


HT

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • ui
    ui
    +关注

    关注

    0

    文章

    205

    浏览量

    21451
  • 鸿蒙
    +关注

    关注

    57

    文章

    2400

    浏览量

    43171
收藏 人收藏

    相关推荐

    鸿蒙Flutter实战:14-现有Flutter 项目支持鸿蒙 II

    ,职责分离,平台抽象,不同平台组合打包,有效解决平台不一致问题 参考资料 鸿蒙Flutter实战:01-搭建开发环境 鸿蒙Flutter实战:09-现有Flutter项目支持鸿蒙 Fl
    发表于 12-26 14:59

    鸿蒙Flutter实战:07混合开发

    # 鸿蒙Flutter实战:混合开发 鸿蒙Flutter混合开发主要有两种形式。 ## 1.基于har 将flutter module打包成har包,在原生
    发表于 10-23 16:00

    基于ArkTS语言的OpenHarmony APP应用开发:多媒体管理2

    /components/pages/MainPage.ets文件中,首先设置媒体查询查询条件。 listenerIsPhone = mediaQuery.matchMediaSync(\'(orientation
    发表于 09-20 13:47

    基于ArkTS语言的OpenHarmony APP应用开发:图片处理

    mediaquery ohos.mediaquery提供媒体查询,提供根据不同媒体类型定义不同的样式。 2.2.1、导入模块 import med
    发表于 09-19 14:23

    基于鸿蒙Next模拟扫图识物的一个过程

    使用@State装饰器定义了几个响应式状态变量,如scanHeight、isVisibility。这些变量的变化会自动触发UI的更新。3.UI结构: 界面使用嵌套的Stack、Column和Row组件构建。主要
    发表于 08-21 15:04

    鸿蒙语言基础类库:system.mediaquery 媒体查询

    根据媒体查询条件,创建MediaQueryList对象。
    的头像 发表于 07-17 16:50 380次阅读
    <b class='flag-5'>鸿蒙</b>语言基础类库:system.<b class='flag-5'>mediaquery</b>  <b class='flag-5'>媒体查询</b>

    鸿蒙开发接口媒体:【@ohos.multimedia.media (媒体服务)】

    媒体子系统为开发者提供一套简单且易于理解的接口,使得开发者能够方便接入系统并使用系统的媒体资源。
    的头像 发表于 06-06 11:03 1026次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>媒体</b>:【@<b class='flag-5'>ohos</b>.multimedia.media (<b class='flag-5'>媒体</b>服务)】

    鸿蒙开发接口UI界面:【@ohos.router (页面路由)】

    本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。 > - 页面路由需要在页面渲染完成之后才能调用,在onInit和onReady生命周期中页面还处于渲染阶段,禁止调用页面路由方法。
    的头像 发表于 05-28 16:26 1064次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>UI</b><b class='flag-5'>界面</b>:【@<b class='flag-5'>ohos</b>.router (页面路由)】

    鸿蒙开发接口UI界面:【@ohos.prompt (弹窗)】

    本模块首批接口从API version 8开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。
    的头像 发表于 05-28 09:35 1270次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>UI</b><b class='flag-5'>界面</b>:【@<b class='flag-5'>ohos</b>.prompt (弹窗)】

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

    后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
    的头像 发表于 05-27 21:50 316次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>UI</b><b class='flag-5'>界面</b>:【@<b class='flag-5'>ohos.mediaquery</b> (<b class='flag-5'>媒体查询</b>)】

    鸿蒙开发接口UI界面:【@ohos.animator (动画)】

    本模块首批接口从API version 6开始支持。后续版本的新增接口,采用上角标单独标记接口的起始版本。
    的头像 发表于 05-27 16:46 684次阅读
    <b class='flag-5'>鸿蒙</b><b class='flag-5'>开发</b>接口<b class='flag-5'>UI</b><b class='flag-5'>界面</b>:【@<b class='flag-5'>ohos</b>.animator (动画)】

    鸿蒙OS开发:【一次开发,多端部署】(资源管理器)解析

    ,使用[@ohos.resourceManager.d.ts] 中的接口,展示了格式化字符串查询、基于指定屏幕分辨率查询媒体资源、获取系统资源管理对象等基础功能,以及展示了资源静态ov
    的头像 发表于 05-21 15:59 1178次阅读
    <b class='flag-5'>鸿蒙</b>OS<b class='flag-5'>开发</b>:【一次<b class='flag-5'>开发</b>,多端部署】(资源管理器)解析

    鸿蒙ArkUI:【从代码到UI显示的整体渲染流程】

    方舟开发框架(简称ArkUI)是鸿蒙开发UI框架,提供如下两种开发范式,我们 **只学声明式开发
    的头像 发表于 05-13 16:06 1082次阅读
    <b class='flag-5'>鸿蒙</b>ArkUI:【从代码到<b class='flag-5'>UI</b>显示的整体渲染流程】

    鸿蒙实战项目开发:【短信服务】

    、OpenHarmony 多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发鸿蒙项目实战等等)鸿蒙(Harmony NEXT) 技术知识点 如果你是一名An
    发表于 03-03 21:29

    鸿蒙媒体开发【简述】

    录制)、图片等。 如下图所示,媒体系统面向应用开发提供音视频应用、图库应用的编程框架接口;面向设备开发提供对接不同硬件芯片适配加速功能;中间以服务形态提供媒体核心功能和管理机制。 音
    发表于 02-28 17:53