响应式布局mediaquery使用，鸿蒙NEXT星河版

最新推荐文章于 2025-06-02 18:12:44 发布

千田土生

最新推荐文章于 2025-06-02 18:12:44 发布

阅读量426

点赞数 10

文章标签：鸿蒙 harmonyos 华为前端

本文链接：https://blog.youkuaiyun.com/xp1870069025/article/details/139726708

版权

一、导入方法，定义响应式接口

// 组件的封装
import mediaquery from '@ohos.mediaquery'

export interface LandType {
  isLandScape: boolean
}

二、监听当前是否是横屏状态

  // 监听当前是否是横屏状态
  @State landRes:LandType = {
    isLandScape:false
  }

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

  aboutToAppear(){
    this.listener.on('change', (mediaQueryResult: mediaquery.MediaQueryResult)=>{
      // 打印横屏状态
      // mediaQueryResult.matches  true 横屏状态  false 竖屏状态
      this.landRes.isLandScape = mediaQueryResult.matches
    })
  }

三、接收外部传入模版参数

  // 接收外部传入的UI模版参数
  @Builder defaultSlot(){}

  @BuilderParam
  Slot:(landRes:LandType)=>void = this.defaultSlot

  build() {
    // 这里因为传递的state简单类型 true/false 而不是响应式的状态
    this.Slot(this.landRes)
  }

四、测试调用

@Entry
@Component
struct Test {
  @Builder
  textBuilder(landRes:LandType){
    Text(landRes.isLandScape.toString())
  }

  build() {
    Row(){
      CheckOrientation({
        Slot:(landRes)=>{
          this.textBuilder(landRes)
        }
      })
    }
  }
}