HarmonyOS鸿蒙Next中ArkTS如何让一个页面支持屏幕旋转

应用级设置屏幕自动旋转：在模块配置文件module.json5中给EntryAbility设置"orientation": “auto_rotation_restricted”，再打开手机自动旋转即可。通过window.getLastWindow（较老镜像用getTopWindow）获取window实例，用setPreferredOrientation设置窗口显示方向的属性。通过display.on可以监听屏幕状态改变。

窗口：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setpreferredorientation9

import window from '@ohos.window';
import display from '@ohos.display';

const TAG = 'foo'
const ORIENTATION: Array<string> = ['垂直', '水平', '反向垂直', '反向水平']

@Entry
@Component
struct ScreenTest {
  @State rotation: number = 0
  @State message: string = ORIENTATION[this.rotation]

  aboutToAppear() {
    this.setOrientation()
    let callback = async () => {
      let d = await display.getDefaultDisplay()
      this.rotation = d.rotation
      this.message = ORIENTATION[this.rotation]
      console.info(TAG, JSON.stringify(d))
    }
    try {
      display.on("change",
        callback); //监听屏幕状态改变
    } catch (exception) {
      console.error(TAG, 'Failed to register callback. Code: ' + JSON.stringify(exception));
    }
  }

  setOrientation() {
    try {
      window.getLastWindow(getContext(this), (err, data) => { //获取window实例
        if (err.code) {
          console.error(TAG, 'Failed to obtain the top window. Cause: ' + JSON.stringify(err));
          return;
        }
        let windowClass = data;
        console.info(TAG, 'Succeeded in obtaining the top window. Data: ' + JSON.stringify(data));
        let orientation =
          window.Orientation.AUTO_ROTATION; //设置窗口方向为传感器自动旋转模式。
        try {
          windowClass.setPreferredOrientation(orientation, (err) => {
            if (err.code) {
              console.error(TAG, 'Failed to set window orientation. Cause: ' + JSON.stringify(err));
              return;
            }
            console.info(TAG, 'Succeeded in setting window orientation.');
          });
        } catch (exception) {
          console.error(TAG, 'Failed to set window orientation. Cause: ' + JSON.stringify(exception));
        }
        ;
      });
    } catch (exception) {
      console.error(TAG, 'Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
    }
    ;
  }

  build() {
    Row() {
      Column() {
        Text(`${this.rotation}`).fontSize(25)
        Text(`${this.message}`).fontSize(25)
      }.width("100%")
    }.height("100%")
  }
}

更多关于HarmonyOS鸿蒙Next中ArkTS如何让一个页面支持屏幕旋转的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

ionicwang 2楼

在HarmonyOS鸿蒙Next中，使用ArkTS让一个页面支持屏幕旋转，可以通过以下步骤实现：

设置页面配置：在pages.json文件中，为对应的页面配置orientation属性，设置为auto，表示支持自动旋转。
```
{
  "pages": [
    {
      "name": "index",
      "config": {
        "orientation": "auto"
      }
    }
  ]
}
```

监听屏幕旋转事件：在ArkTS页面中，使用@ohos.display模块监听屏幕旋转事件，并根据旋转方向调整页面布局或逻辑。

import display from '@ohos.display';

@Entry
@Component
struct Index {
  @State orientation: display.Orientation = display.Orientation.PORTRAIT;

  onPageShow() {
    display.on('orientationChange', (newOrientation: display.Orientation) => {
      this.orientation = newOrientation;
      // 根据新的屏幕方向调整布局或逻辑
    });
  }

  build() {
    // 根据this.orientation的值动态调整布局
    // ...
  }
}

处理布局调整：在build方法中，根据orientation状态变量动态调整页面布局，确保在不同屏幕方向下显示效果良好。

通过以上步骤，ArkTS页面可以支持屏幕旋转，并根据旋转方向动态调整布局。

ionicwang 3楼

在HarmonyOS鸿蒙Next中，若要让一个页面支持屏幕旋转，可以通过以下步骤实现：

配置Manifest文件：在module.json5中，找到对应的页面配置，确保"orientation"属性设置为"unspecified"或"landscape"，以允许屏幕旋转。

"abilities": [
  {
    "name": ".MainAbility",
    "orientation": "unspecified" // 或 "landscape"
  }
]

监听屏幕旋转事件：在ArkTS页面中，使用@ohos.display模块的on('orientationChange')方法监听屏幕旋转事件，并在回调中处理布局更新。

import display from '@ohos.display';

display.on('orientationChange', (newOrientation) => {
  // 根据newOrientation更新页面布局
});

动态调整布局：根据屏幕方向，动态调整UI布局，确保用户体验一致。