媒体查询布局,查询设置名:phone,tabelt,2in1

媒体查询设置名:phone,tabelt,2in1, 但在我的电脑里，出了问题，2in1测试失败，其它的设备名都监控成功。

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

@Entry
@Component
struct Page8 {
  @State message: string = '';
  @State backColor: Color = Color.White
  //通过 matchMediasync 接口设置媒体查询条件 -- wb98.com

// 常见设备名：phone tablet tv(智慧屏设置)  car(车机这幅图)  wearable(穿戴设置，如智能手表)
// 其他设备类型（部分场景）
  // liteWearable 轻量级穿戴设备（如手环）。
  // smartVision  智能视觉设备（如 AR/VR 设备）。
  // router 路由器等网络设备。
  // pc 二合一设备或笔记本电脑（需注意不同接口可能要求首字母大写 "PC"）
 // 2in1
  private listener0: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(device-type: phone) ')
  private listener1: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(device-type: tablet) ')
  private listener2: mediaquery.MediaQueryListener =
    this.getUIContext().getMediaQuery().matchMediaSync('(device-type: 2in1) ')

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

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

    //在我的电脑里，2in1 测试失败，不知为何
    this.listener2.on('change', (result: mediaquery.MediaQueryResult) => {
      if (result.matches) {
        this.backColor = Color.Green
        this.message = '2in1'
      }
    })
  }

  aboutToDisappear(): void {
    //解绑监听
    this.listener0.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://wb98.com/post/381.html