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

鸿蒙坚果

发布于 2022-8-3 15:13

浏览

1收藏

如何使用

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

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

import mediaquery from '@ohos.mediaquery'
1.

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

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

最后通过上面保存的条件监听句柄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) // 去注册回调
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

例子：

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%')
  }
}
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.
33.
34.
35.
36.
37.
38.

#物联网征文# ArkUI中利用媒体查询实现不同布局-鸿蒙开发者社区

媒体查询条件语法规则

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

例如：

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

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

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

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

媒体特征(media-feature)

类型	说明
height	应用页面显示区域的高度。
min-height	应用页面显示区域的最小高度。
max-height	应用页面显示区域的最大高度。
width	应用页面显示区域的宽度。
min-width	应用页面显示区域的最小宽度。
max-width	应用页面显示区域的最大宽度。
resolution	设备的分辨率，支持dpi，dppx和dpcm单位。其中：- dpi表示每英寸中物理像素个数，1dpi≈0.39dpcm；- dpcm表示每厘米上的物理像素个数，1dpcm ≈ 2.54dpi；- dppx表示每个px中的物理像素数（此单位按96px=1英寸为基准，与页面中的px单位计算方式不同），1dppx = 96dpi。
min-resolution	设备的最小分辨率。
max-resolution	设备的最大分辨率。
orientation	屏幕的方向。可选值：- orientation: portrait（设备竖屏）- orientation: landscape（设备横屏）
device-height	设备的高度。
min-device-height	设备的最小高度。
max-device-height	设备的最大高度。
device-width	设备的宽度。
min-device-width	设备的最小宽度。
max-device-width	设备的最大宽度。
round-screen	屏幕类型，圆形屏幕为true，非圆形屏幕为 false。
dark-mode	系统为深色模式时为true，否则为false。