HarmonyOS 如何实现单独某个页面实现横屏效果

HarmonyOS

aquaa

2025-01-09 16:19:42

浏览

回答 1

待解决

回答 1

按赞同

按时间

shlp

参考demo：

1、首先打开entry下面的module.json5文件，在abilities节点下添加一个orientation的属性："orientation": 'unspecified'。

2、第一个页面：

import { router } from '@kit.ArkUI';

@Entry
@Component
struct aboutScreen1 {
  @State message: string = '';

  build() {
    Column() {
      Text('首页，点我跳转')
        .fontSize(30)
        .textAlign(TextAlign.Center)
        .width('100%')
        .fontWeight(500)
        .height('100%')
        .onClick(() => {
          router.pushUrl({url: "pages/aboutScreen2" })
        })
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .backgroundColor(Color.White)
    .height('100%')
  }
}

3、第二个页面：

import { router, window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct aboutScreen2{
  @State message: string = '';

  aboutToAppear(): void {
    let orientation = window.Orientation.LANDSCAPE
    this.setScreenOrientation(orientation)
  }

  aboutToDisappear(): void {
    let orientation = window.Orientation.PORTRAIT
    this.setScreenOrientation(orientation)
  }

  setScreenOrientation(orientation: window.Orientation) {
    let windowClass: window.Window | undefined = undefined;
    try{
      let promise = window.getLastWindow(getContext())
      promise.then((data) => {
        windowClass = data
        windowClass.setPreferredOrientation(orientation)
      }).catch((err: BusinessError) => {
        console.error('getLastWindow error')
      })
    } catch (e) {
      console.error('setScreenOrientation error')
    }
  }

  build() {
    Column() {
      Text('我横屏啦')
        .fontSize(30)
        .textAlign(TextAlign.Center)
        .width('100%')
        .fontWeight(500)
        .height('50%')
    }
    .justifyContent(FlexAlign.Center)
    .width('100%')
    .backgroundColor(Color.White)
    .height('100%')
  }
}