在HarmonyOS NEXT开发中NodeContainer的使用示例？

Question

在HarmonyOS NEXT开发中NodeContainer的使用示例？

Answer 1

在utils/GlobalThis保存windowClass：

import { BuilderNode, FrameNode, NodeController, Size, UIContext, window } from '@kit.ArkUI' 
import { GlobalThis } from '../utils/GlobalThis' 
import { BusinessError } from '@kit.BasicServicesKit' 
 
class VideoParams { 
  controller: VideoController | undefined 
  innerResource: Resource | undefined 
} 
@Builder 
function videoBuilder(params: VideoParams) { 
  Column() { 
    Video({ 
      src: params.innerResource, 
      controller: params.controller 
    }) 
  } 
} 
let videoNode: BuilderNode<[VideoParams]> | null = null 
class VideoNodeController extends NodeController { 
  private wrapBuilder: WrappedBuilder<[VideoParams]> = wrapBuilder(videoBuilder) 
  private controller: VideoController | undefined 
  private innerResource: Resource | undefined 
  private isShow: boolean = false 
  constructor(isShow: boolean, controller: VideoController | undefined, src: Resource) { 
    super() 
    this.isShow = isShow 
    this.controller = controller 
    this.innerResource = src 
  } 
  makeNode(uiContext: UIContext): FrameNode | null { 
    if (!this.isShow) { 
      return null 
    } 
    if (videoNode == null) { 
      videoNode = new BuilderNode<[VideoParams]>(uiContext); 
      videoNode.build(this.wrapBuilder, { controller: this.controller, innerResource: this.innerResource }) 
    } 
    let frameNode = videoNode?.getFrameNode() 
    return frameNode ? frameNode : null 
  } 
  aboutToResize(size: Size) { 
    console.log("aboutToResize width : " + size.width + " height : " + size.height) 
  } 
  aboutToAppear() { 
    console.log("aboutToAppear") 
  } 
  aboutToDisappear() { 
    console.log("aboutToDisappear"); 
  } 
  onTouchEvent(event: TouchEvent) { 
    console.log("onTouchEvent"); 
  } 
  toShow() { 
    this.isShow = true; 
    this.rebuild(); 
  } 
  toHide() { 
    this.isShow = false; 
    this.rebuild(); 
  } 
} 
let controller: VideoController | undefined = undefined 
let innerResource: Resource = $rawfile('video.mp4') 
let videoController1: VideoNodeController = new VideoNodeController(true, controller, innerResource) 
let videoController2: VideoNodeController = new VideoNodeController(false, controller, innerResource) 
@Entry 
@Component 
struct Index { 
  @State status: boolean = true 
  windowClass: window.Window | null = null 
  aboutToAppear(): void { 
    this.windowClass = GlobalThis.getInstance().getMainWindow() 
  } 
  build() { 
    Stack() { 
      Column() { 
        NodeContainer(videoController1) 
          .height("30%") 
      } 
      .padding({ left: 35, right: 35, top: 35 }) 
      .width("100%") 
      .height("100%") 
      NodeContainer(videoController2) 
        .height(&#34;100%&#34;) 
      .visibility(this.status? Visibility.None : Visibility.Visible) 
 
      Button(&#34;Change&#34;) 
      .onClick(() =&gt; { 
        if (this.status) { 
          videoController1.toHide() 
          videoController2.toShow() 
        } else { 
          videoController1.toShow() 
          videoController2.toHide() 
        } 
        this.status = !this.status 
        if (this.windowClass) { 
          this.setOrientation(this.status? window.Orientation.PORTRAIT : window.Orientation.LANDSCAPE) 
        } 
      }) 
    } 
 
  } 
  setOrientation(orientation: window.Orientation) { 
    try { 
      this.windowClass?.setPreferredOrientation(orientation, (err: BusinessError) => { 
        const errCode: number = err.code; 
        if (errCode) { 
          console.error(Failed to set window orientation. Cause code: ${err.code}, message: ${err.message}); 
          return; 
        } 
        console.info('Succeeded in setting window orientation.'); 
      }); 
    } catch (exception) { 
      console.error(Failed to set window orientation. Cause code: ${exception.code}, message: ${exception.message}); 
    } 
  } 
}