HarmonyOS 鸿蒙Next 跨页面使用NodeContainer全局复用组件 页面1的NodeContainer组件在从页面2返回时不显示

发布于 1周前 作者 wuwangju 最后一次编辑是 5天前 来自 鸿蒙OS

用单例定义了一个全局复用组件,在页面1和页面2都用NodeContainer显示该动态组件,从页面1跳到页面2,再从页面2返回到页面1,此时页面1没有显示出该组件

页面1的代码:

import { TestBuild } from '../TestBuild';
import { router } from '@kit.ArkUI';
import { common } from '@kit.AbilityKit';


@Entry
@Component
struct Index {
  @State message: string = 'Hello World';
  pageStack: NavPathStack = new NavPathStack()
  private context = getContext(this) as common.UIAbilityContext;

  aboutToAppear(): void {
  }

  build() {
    Column() {
      Row() {
        Button('页面二').onClick((eventr: ClickEvent) => {
          router.pushUrl({ url: 'pages/SecondIndex' })
        }).margin({ right: 5 })

        Button('页面三').onClick((eventr: ClickEvent) => {
          router.pushUrl({ url: 'pages/ThirdIndex' })
        })

        NodeContainer(TestBuild.getNodeController())
          .width('100%')
          .height('80%')
      }
    }
  }
}

页面2的代码:

import { TestBuild } from '../TestBuild'


@Entry
@Component
struct SecondIndex {
  @State message: string = 'Hello World';

  build() {
    Column() {
      RelativeContainer() {
          NodeContainer(TestBuild.getNodeController())
            .width('100%')
            .height('100%')
      }
      .height('100%')
      .width('100%')
    }
  }
  
}
全局复用组件的代码:

import { BuilderNode, FrameNode, NodeController, UIContext } from '@kit.ArkUI'
import { webview } from '@kit.ArkWeb';

let mycontroller: webview.WebviewController = new webview.WebviewController();

@Builder
function webNode() {
  Column() {
    Web({
      src: 'https://www.baidu.com',
      // src: $rawfile('testHtml.html'),
      controller: mycontroller
    }).domStorageAccess(true)
      .javaScriptAccess(true)
      .height('100%')
      .width('100%')
      .margin({ bottom: 20 })
      .onErrorReceive((event) => {
        if (event?.request.isMainFrame()) {
        }
      })
  }
}

export class TestNodeController extends NodeController {
  makeNode(uiContext: UIContext): FrameNode | null {
    return TestBuild.getWebNode(uiContext)
  }
}

export class TestBuild {
  static node: BuilderNode<ESObject> | null = null
  static testNodeController : TestNodeController = new TestNodeController();

  static getWebNode(uiContext: UIContext): FrameNode | null {
    if (!TestBuild.node) {
      TestBuild.node = new BuilderNode(uiContext)
      TestBuild.node.build(wrapBuilder(webNode))
    }else {
      TestBuild.node.update(null)
    }
    return TestBuild.node.getFrameNode()
  }

  static getNodeController():TestNodeController{
    return TestBuild.testNodeController
  }

}

更多关于HarmonyOS 鸿蒙Next 跨页面使用NodeContainer全局复用组件 页面1的NodeContainer组件在从页面2返回时不显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

看你的代码是建了一个NodeController单例,这个估计是不支持单例造成的,试过直接

new TestNodeController() 是没问题的

更多关于HarmonyOS 鸿蒙Next 跨页面使用NodeContainer全局复用组件 页面1的NodeContainer组件在从页面2返回时不显示的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中,跨页面使用NodeContainer全局复用组件时,若页面1的NodeContainer组件在从页面2返回时不显示,通常是由于页面栈管理或组件状态未正确恢复导致的。

可能的原因包括:

  1. 页面生命周期:页面2返回页面1时,页面1的onResume或相关生命周期方法可能未正确触发,导致NodeContainer未能重新渲染。

  2. 组件状态丢失:跨页面传递组件状态时,可能因为状态管理不当(如未使用全局状态管理或状态未正确保存和恢复),导致NodeContainer组件状态丢失。

  3. 渲染逻辑错误:页面1的渲染逻辑可能存在错误,导致在特定条件下(如从页面2返回时)NodeContainer不被渲染。

解决方法:

  • 确认页面1的onResume等生命周期方法被正确调用,并在其中检查NodeContainer的渲染逻辑。
  • 使用全局状态管理(如DataAbility或分布式数据)来确保跨页面传递的状态不会丢失。
  • 检查并修正页面1的渲染逻辑,确保在所有情况下NodeContainer都能被正确渲染。

如果问题依旧没法解决请联系官网客服,官网地址是:https://www.itying.com/category-93-b0.html

回到顶部