HarmonyOS 鸿蒙Next Web组件视频全屏实现方法，Web与List混合场景

import { webview } from ‘@kit.ArkWeb’ import { LengthUnit } from ‘@ohos.arkui.node’ import { common } from ‘@kit.AbilityKit’; import { window } from ‘@kit.ArkUI’;

@Entry @Component struct TestWeb { webviewController: webview.WebviewController = new webview.WebviewController() @State isFullScreen: boolean = false

private changeOrientation(isLandscape: boolean) { let context: common.UIAbilityContext = getContext(this) as common.UIAbilityContext; window.getLastWindow(context).then((lastWindow) => { lastWindow.setPreferredOrientation(isLandscape ? window.Orientation.LANDSCAPE : window.Orientation.PORTRAIT) lastWindow.setWindowLayoutFullScreen(isLandscape ? true : false) }); }

build() { Column() { Text(“测试Web中的视频全屏”) .width(“100%”) .height(44) .visibility(this.isFullScreen ? Visibility.None : Visibility.Visible) .margin({ top: { value: 40, unit: LengthUnit.VP } }) .textAlign(TextAlign.Center)

  Scroll() {
    Column() {
      Web({
        src: "https://tnews.xjmty.com/app/slyapp/sh/202412/t20241226_25794936.html?cid=25794936&sid=149&ctype=article&uid=zx90yUqy3uA",
        controller: this.webviewController,
        renderMode: RenderMode.SYNC_RENDER
      })
      .onFullScreenEnter((event) => {
        console.log("onFullScreenEnter...")
        this.changeOrientation(true);
        this.isFullScreen = true
      })
      .onFullScreenExit(() => {
        console.log("onFullScreenExit...")
        this.changeOrientation(false);
        this.isFullScreen = false
      })
      .width("100%")
      .height("auto_size")
      .javaScriptAccess(true)
      .domStorageAccess(true)
      .cacheMode(CacheMode.Default)

      Text("评论列表")
        .width("100%")
        .height(400)
        .textAlign(TextAlign.Center)
    }
    .alignItems(HorizontalAlign.Start)
    .justifyContent(FlexAlign.Start)
  }
  .layoutWeight(1)

  Row() {
    Text("点赞").fontSize(16)
    Text("收藏").fontSize(16)
    Text("分享").fontSize(16)
  }
  .width("100%")
  .height(60)
  .alignItems(VerticalAlign.Center)
  .justifyContent(FlexAlign.SpaceAround)
  .visibility(this.isFullScreen ? Visibility.None : Visibility.Visible)
}

} }