HarmonyOS 鸿蒙Next视频类app进入应用悬浮框后，如何设置修改应用悬浮窗大小，完成横屏播放适配

1. 启动页：

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

function titleButton() {
  .backgroundColor('#00000000')
  .width('32vp')
  .height('32vp')
  .borderRadius('4vp')
}

@Entry
@Component
struct PortraitUI {
  private windowClass: window.Window | undefined = undefined;
  @State videoSrc: Resource = $rawfile('videoTest.mp4')
  @State previewUri: Resource = $r('app.media.startIcon')
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X

  aboutToAppear(): void {
    try {
      window.getLastWindow(getContext(this), (err: BusinessError, windowClass) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
          return;
        }
        this.windowClass = windowClass;
        windowClass.disableLandscapeMultiWindow(); // 旋转至竖屏关闭横屏多窗
        windowClass.setWindowLayoutFullScreen(false); //设置非沉浸式布局
      });
    } catch (exception) {
      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
    }
  }

  build() {
    RelativeContainer() {
      Stack() {
        Video({
          src: this.videoSrc,
          previewUri: this.previewUri,
          currentProgressRate: this.curRate
        })
          .objectFit(ImageFit.Contain)
          .controls(true)
          .autoPlay(false)
          .loop(true)
          .width('100%')
          .height('30%')
          .onFullscreenChange(() => {
            this.windowClass?.setPreferredOrientation(window.Orientation.LANDSCAPE, () => {
              router.pushUrl({ url: 'pages/LandScapeUI' });
            });
          })
        Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
          Button() {
            Image($r('app.media.ic_back'))
              .height('100%')
              .aspectRatio(1)
          }
          .titleButton()

          Button() {
            Image($r('app.media.ic_share'))
              .height('100%')
              .aspectRatio(1)
          }
          .titleButton()
        }
        .margin({
          left: '16vp',
          top: '16vp',
          right: '16vp'
        })
        .position({ y: 0 })
      }
    }
    .alignRules({
      center: { anchor: '__container__', align: VerticalAlign.Center },
      middle: { anchor: '__container__', align: HorizontalAlign.Center }
    })
  }
}

1. 横屏页：

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

function titleButton() {
  .backgroundColor('#00000000')
  .width('32vp')
  .height('32vp')
  .borderRadius('4vp')
}

@Entry
@Component
struct LandScapeUI {
  private windowClass: window.Window | undefined = undefined;
  @State videoSrc: Resource = $rawfile('videoTest.mp4')
  @State previewUri: Resource = $r('app.media.startIcon')
  @State curRate: PlaybackSpeed = PlaybackSpeed.Speed_Forward_1_00_X

  aboutToAppear(): void {
    try {
      window.getLastWindow(getContext(this), (err: BusinessError, windowClass) => {
        const errCode: number = err.code;
        if (errCode) {
          console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(err));
          return;
        }
        this.windowClass = windowClass;
        windowClass.enableLandscapeMultiWindow(); // 旋转至横屏开启横屏多窗
        windowClass.setWindowLayoutFullScreen(false);
      });
    } catch (exception) {
      console.error('Failed to obtain the top window. Cause: ' + JSON.stringify(exception));
    }
  }

  build() {
    RelativeContainer() {
      Stack() {
        Video({
          src: this.videoSrc,
          previewUri: this.previewUri,
          currentProgressRate: this.curRate
        })
          .objectFit(ImageFit.Contain)
          .controls(true)
          .autoPlay(false)
          .loop(true)
          .width('100%')
          .height('100%')

        Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceBetween }) {
          Button() {
            Image($r('app.media.ic_back'))
              .height('100%')
              .aspectRatio(1)
          }
          .titleButton()
          .onClick(() => {
            this.windowClass?.setPreferredOrientation(window.Orientation.PORTRAIT, () => {
              router.pushUrl({ url: 'pages/PortraitUI' });
            });
          })

          Button() {
            Image($r('app.media.ic_share'))
              .height('100%')
              .aspectRatio(1)
          }
          .titleButton()
        }
        .margin({
          left: '16vp',
          top: '16vp',
          right: '16vp'
        })
        .position({ y: 0 })
      }
    }
    .backgroundColor('#ff0048fd')
    .height('100%')
    .width('100%')
  }
}

1. 设置

在module.json5配置文件中abilities标签下的 “preferMultiWindowOrientation”: "landscape_auto"设置一下