一多开发，响应式布局之媒体查询布局，宽度监控，arkts

在实际应用开发过程中，开发者常常需要针对不同类型设备或同一类型设备的不同状态来修改应用的样式。媒体查询提供了丰富的媒体特征监听能力，可以监听应用显示区域变化、横竖屏、深浅色、设备类型等等，因此在应用开发过程中使用的非常广泛。

下面是媒体查询，监控宽度的变化。石川，arkts，鸿蒙，wb98.com

import { mediaquery } from '@kit.ArkUI'; //导入媒体查询模块

@Entry
@Component
struct Page8 {
  @State message: string = '';
  @State backColor: Color = Color.White
  //通过 matchMediasync 接口设置媒体查询条件
  //屏幕尺寸在320到600,sm,手机竖屏为sm,横屏就是md
  private listener: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(600vp>width>320vp)')
  // 屏幕尺寸小于320，xs,智能手表
  private listener1: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(width<320vp)')
  // 屏幕尺寸大于600，md,平板
  private listener2: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(width>600vp)')

  aboutToAppear(): void {
    //所有监听绑定事件 - wb98.com
    this.listener.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        this.backColor = Color.Yellow
        this.message = 'sm'
      }
    })

    this.listener1.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        this.backColor = Color.Red
        this.message = 'xs'
      }
    })

    this.listener2.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        this.backColor = Color.Green
        this.message = 'md'
      }
    })
  }

  aboutToDisappear(): void {
    //解绑监听 - wb86.com
    this.listener.off('change')
    this.listener1.off('change')
    this.listener2.off('change')
  }

  build() {

    Column() {

      Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Medium)
    }
    .width('100%')
    .height('100%')
    .backgroundColor(this.backColor)

  }
}

打赏 支付宝打赏 微信打赏

来源：济亨网

本文链接：https://www.wb98.com/post/378.html