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

发布于 2022-8-3 15:13
浏览
1收藏

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

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

媒体查询(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%')
  }
}

#物联网征文# ArkUI中利用媒体查询实现不同布局-开源基础软件社区

媒体查询条件语法规则

[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)

类型 说明
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。

参考文档

媒体查询

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
2
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐