方法一:利用媒体查询

import { mediaquery, UIContext } from '@kit.ArkUI';


// Store context in EntryAbility
const context = AppStorage.get("context") as UIContext;
let listener = context.getMediaQuery().matchMediaSync('(orientation: landscape)'); // Listen to landscape events
function onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) {
  console.info('mediaQueryResult.matches:' + mediaQueryResult.matches)
  if (mediaQueryResult.matches) {
    // do something here
  } else {
    // do something here
  }
}
listener.on('change', onPortrait) // Register callback
listener.off('change', onPortrait) // Unregister callback


@Entry
@Component
struct Index {
  build() {
    Column() {
      Column() {
        Text('test')
      }
      .width('100%')
    }
    .height('100%')
    .width('100%')
    .justifyContent(FlexAlign.End)
  }
}

方法二:

可通过[getDefaultDisplaySync()]方法获取到[Display]实例,再通过此实例获取其rotation属性即可获取屏幕横竖屏状态。

import { display, window } from '@kit.ArkUI';


@Entry
@Component
struct windowRotation {
  build() {
    Text("Scroll Area")
      .width("100%")
      .height("100%")
      .backgroundColor(0X330000FF)
      .fontSize(16)
      .textAlign(TextAlign.Center)
      .onClick(() => {
        window.getLastWindow(this.getUIContext().getHostContext(), (err, win) => {
          let cutOutInfo = win.getWindowAvoidArea(window.AvoidAreaType.TYPE_SYSTEM_GESTURE)
          console.log(JSON.stringify(cutOutInfo))
          if (window.Orientation.AUTO_ROTATION) {
            let rotation: number = display.getDefaultDisplaySync().orientation // Get current screen orientation enum value
            console.log('' + rotation);
            if (rotation == 0) {
              console.log("CutOutInfo Portrait data: " + JSON.stringify(cutOutInfo));
            } else if (rotation == 1) {
              console.log("CutOutInfo Landscape data: " + JSON.stringify(cutOutInfo));
            } else if (rotation == 2) {
              console.log("CutOutInfo Reverse portrait data: " + JSON.stringify(cutOutInfo));
            } else {
              console.log("CutOutInfo Reverse landscape data: " + JSON.stringify(cutOutInfo));
            }
          }
        })
      })
  }}
Logo

讨论HarmonyOS开发技术,专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐