HarmonyOS如何手动重置自定义组件?

应用正在开发聊天界面的一多适配,其中联系人列表和聊天界面为已有组件,需要实现复用。在手机小屏场景下,点击联系人后会跳转至聊天界面,关闭聊天界面后返回联系人列表,此场景下,每次进入聊天界面都是重新打开聊天组件并渲染,会执行聊天组件的相关生命周期。在折叠屏或者平板场景下,联系人列表和聊天界面在同屏下左右分布,因此在点击列表中联系人是,只是向聊天界面传递联系人参数,聊天界面会根据传递进来的属性做相关更新。问题:聊天界面上,状态参数较多,若通过代码重置状态变量相对困难,是否有方案可以实现令组件自动充值并执行完成生命周期?

HarmonyOS
2024-10-12 11:00:52
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
Heiang

使用NodeContainer+NodeController的方式进行控制,demo参考如下:

import { UIContext } from '@ohos.arkui.UIContext';  
import { NodeController, BuilderNode, FrameNode } from '@ohos.arkui.node';  
declare class Params {  
  componentId: number  
}  
@Entry  
@Component  
struct Index {  
  @State componentId: number = 1  
  @State baseNode: MyNodeController = new MyNodeController(this.componentId)  
  build() {  
    Column() {  
      Button('联系人1')  
        .onClick(() => {  
          if(this.componentId !== 1){  
            this.componentId = 1;  
            this.baseNode.update(this.componentId).rebuild()  
          }  
        })  
      Button('联系人2')  
        .onClick(() => {  
          if(this.componentId !== 2){  
            this.componentId = 2;  
            this.baseNode.update(this.componentId).rebuild()  
          }  
        })  
      NodeContainer(this.baseNode)  
    }  
  }  
}  
@Component  
struct ChildComponent {  
  @Prop componentId: number  
  @State number: number = 0  
  
  build() {  
    Column() {  
      Button(`联系人${this.componentId} ++`)  
        .onClick(() => {  
          this.number ++;  
        })  
      Text(`计数:${this.number}`)  
    }  
  }  
}  
@Builder  
function ChildBuilder(params: Params) {  
  Row(){  
    ChildComponent(params)  
  }  
}  
class MyNodeController extends NodeController {  
  componentId: number = 1  
  constructor(componentId: number) {  
    super();  
    this.componentId = componentId;  
  }  
  private rootNode: BuilderNode<[Params]> | null = null;  
  private wrapBuilder: WrappedBuilder<[Params]> = wrapBuilder(ChildBuilder);  
  update(componentId: number) {  
    this.componentId = componentId;  
    return this;  
  }  
  makeNode(uiContext: UIContext): FrameNode | null {  
    if (this.rootNode === null) {  
      this.rootNode = new BuilderNode(uiContext);  
    }  
    this.rootNode.build(this.wrapBuilder, { componentId: this.componentId })  
    return this.rootNode.getFrameNode();  
  }  
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.

上述demo模拟为切换联系人后重置聊天组件内部状态,使用NodeContainer进行占位,在点击上方两个按钮时进行切换,切换时,更新baseNode类中的参数并rebuild,实现自定义组件的重置。

分享
微博
QQ
微信
回复
2024-10-12 16:45:18
相关问题
HarmonyOS 定义自定义组件
1031浏览 • 1回复 待解决
HarmonyOS 如何自定义布局组件
719浏览 • 1回复 待解决
HarmonyOS 如何自定义toast组件
878浏览 • 1回复 待解决
HarmonyOS 自定义组件如何获取高度?
1021浏览 • 1回复 待解决
HarmonyOS 如何主动销毁自定义组件
947浏览 • 1回复 待解决
HarmonyOS如何自定义组件的Controller?
1212浏览 • 1回复 待解决
HarmonyOS如何自定义视频组件样式
1204浏览 • 1回复 待解决
HarmonyOS 自定义StepperView组件如何实现
833浏览 • 1回复 待解决
ArkTs如何自定义容器组件
4128浏览 • 1回复 待解决
如何自定义模拟Tabs组件
1695浏览 • 1回复 待解决
如何自定义组件原型菜单
1595浏览 • 1回复 待解决
自定义组件如何导出、引入?
3247浏览 • 1回复 待解决
HarmonyOS 自定义滑动组件
676浏览 • 1回复 待解决
HarmonyOS 自定义组件问题
1348浏览 • 1回复 待解决
HarmonyOS 地图组件如何添加自定义UI
553浏览 • 1回复 待解决
HarmonyOS自定义组件增加方法如何实现
1244浏览 • 1回复 待解决
提问
该提问已有0人参与 ,帮助了0人