【FAQ】【ARK UI】HarmonyOS ETS 横竖屏适配

​ 参考资料

媒体查询

【问题描述】

ETS如何去适配不用的屏幕大小，以及横屏或者竖屏的展示不同的样式，

【问题答案】

我们可以使用媒体查询根据 媒体查询条件语法规则来控制布局的显示，如题所示：在横屏的时候显示一个Text组件竖屏显示一个Image组件，代码如下

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 }) {
      if (this.islandscape) {
        Text("1111111")
          .backgroundColor(Color.Blue)
          .textAlign(TextAlign.Center)
          .fontSize('50fp')
          .fontColor(Color.White)
          .width('100%')
          .height('100vp')
      } else {
        Image($r('app.media.icon'))
          .width(110).height(110)
      }

    }
    .width('100%').height('100%')
  }
}

运行效果

​

​

【FAQ】

当改ETSPage界面在第二跳转的界面时候，切换横竖屏的时候，都回回到第一个界面，这个问题怎么处理

参考链接如下

https://developer.huawei.com/consumer/cn/forum/topic/0203585894602560646?fid=0101587866109860105

代码如下

config.json

"configChanges": [
  "orientation"
]

在ability重写onOrientationChanged，代码如下

@Override
protected void onOrientationChanged(AbilityInfo.DisplayOrientation displayOrientation) {
    super.onOrientationChanged(displayOrientation);
}

​欲了解更多更全技术文章，欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh