#物联网征文# ArkUI中利用媒体查询实现不同布局 原创

【本文正在参加物联网有奖征文活动】

大家都知道，我们的手机经常会有横竖屏切换到功能，这个时候对于一些样式，我们就要去做一些不同的适配才可以，那么，我们如何实现这个功能呢，其实很简单，我们首先要做的就是媒体查询。

媒体查询（Media Query）在移动设备上应用十分广泛，开发者经常需要根据设备的大致类型或者特定的特征和设备参数（例如屏幕分辨率）来修改应用的样式。为此媒体查询提供了如下功能：

1. 针对设备和应用的属性信息，可以设计出相匹配的布局样式。
2. 当屏幕发生动态改变时（比如分屏、横竖屏切换），应用页面布局同步更新。

如何使用

通过调用媒体查询接口，设置媒体查询条件和查询结果的回调函数，在对应的条件的回调函数里更改页面布局或者实现业务逻辑。

首先导入媒体查询模块，例如：

import mediaquery from '@ohos.mediaquery'

然后通过matchMediaSync接口设置媒体查询条件，并保存返回的条件监听句柄，例如：

listener = mediaquery.matchMediaSync('(orientation: landscape)')

最后通过上面保存的条件监听句柄listener去注册回调函数，在回调函数里更改页面布局或者实现业务逻辑，当匹配到媒体查询条件时会触发此回调函数，例如：

  import mediaquery from '@ohos.mediaquery'
  
  let listener = mediaquery.matchMediaSync('(orientation: landscape)'); //监听横屏事件
  function onPortrait(mediaQueryResult) {
      if (mediaQueryResult.matches) {
        //你的逻辑
      this.islandscape = true
      } else {
          //你的逻辑
      this.islandscape = false
      }
  }
  this.listener.on('change', this.onPortrait) // 注册回调
  this.listener.off('change', this.onPortrait) // 去注册回调

例子：

import mediaquery from '@ohos.mediaquery'

let portraitFunc = null

@Entry
@Component
struct MediaQueryExample {
  @State islandscape: boolean = false
  listener = mediaquery.matchMediaSync('(orientation: landscape)')

  onPortrait(mediaQueryResult) {
    if (mediaQueryResult.matches) {
      this.islandscape = true
    } else {
      this.islandscape = false
    }
  }

  aboutToAppear() {
    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.islandscape==true ? "横屏显示":   "竖屏显示")
        .backgroundColor(Color.Blue)
        .textAlign(TextAlign.Center)
        .fontSize('50fp')
        .fontColor(Color.White)
        .width('100%')
        .height('100vp')

    }
    .width('100%').height('100%')
  }
}

媒体查询条件语法规则

[media-type] [and|not|only] [(media-feature)]

例如：

screen and (round-screen: true) ：当设备屏幕是圆形时条件成立

(max-height: 800) ：当高度小于800时条件成立

(height <= 800) ：当高度小于800时条件成立

screen and (device-type: tv) or (resolution < 2) ：包含多个媒体特征的多条件复杂语句查询

媒体特征(media-feature)

参考文档

媒体查询