实现横竖屏切换鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例通过 setPreferredOrientation 方法来控制窗口的横竖屏显示，通过设置组件的 rotate 属性来控制组件的横竖屏显示。

实现横竖屏切换源码链接

效果预览

使用说明

点击横屏竖屏按钮实现窗口的横竖屏显示切换，点击组件旋转按钮实现组件的横竖屏显示切换。

实现思路

1. 点击横屏竖屏按钮后调用setPreferredOrientation 方法来控制窗口的横竖屏显示。

const topWindow = await window.getLastWindow(getContext(this));
await topWindow.setPreferredOrientation(window.Orientation.LANDSCAPE_INVERTED);
...
const topWindow = await window.getLastWindow(getContext(this));
await topWindow.setPreferredOrientation(window.Orientation.PORTRAIT);

2. 点击组件旋转按钮后通过设置组件的 rotate 属性来控制组件的横竖屏显示，同时通过onAreaChange来获取区域变化信息。

Column() {
  Button($r('app.string.button_rotate'))
    .onClick(() => {
      if (this.angle === 0) {
        this.angle = 90;
        this.newWidth = this.tempWidth;
        this.newHeight = this.tempHeight;
      } else {
        this.angle = 0;
        this.newWidth = this.tempWidth;
        this.newHeight = this.tempHeight;
      }
    });
}
.onAreaChange((oldValue: Area, newValue: Area) => {
  this.tempWidth = newValue.height as number;
  this.tempHeight = newValue.width as number;
})
.height(this.newHeight)
.width(this.newWidth)
.backgroundColor(Color.Blue)
.rotate({ angle: this.angle });