HarmonyOS 关于动态UI相关BuilderNode 从Colum的builder方法生成的话,能添加子node到colum容器内吗

我们现在动态生成UI,Colum为动态生成,还有一些图片及文本类的,也是动态生成,想使用buildeNode的添加子node方法 将 图片/文本放到Colum容器内,是否可以实现 类似系统的 Colum(){ Image() Text() } 这种效果。

HarmonyOS
2024-09-02 10:58:18
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
Heiang

请参考如下demo:

import { UIContext } from '@ohos.ArkUI.UIContext'; 
import { NodeController, BuilderNode, FrameNode } from "@ohos.ArkUI.node" 
 
class Params { 
  text: string = "" 
  constructor(text: string) { 
    this.text = text; 
  } 
} 
 
@Builder 
function buildText(params: Params) { 
  Column() { 
    Text(params.text) 
      .fontSize(50) 
      .fontWeight(FontWeight.Bold) 
  } 
} 
 
@Builder 
function buildImage() { 
  Column() { 
    Image($r("app.media.testImage")) 
  } 
} 
 
class TextNodeController extends NodeController { 
  private textNode: BuilderNode<[Params]> | null = null; 
  private message: string = ""; 
 
  constructor(message: string) { 
    super() 
    this.message = message 
  } 
 
  makeNode(context: UIContext): FrameNode | null { 
    this.textNode = new BuilderNode(context); 
    this.textNode.build(wrapBuilder<[Params]>(buildText), new Params(this.message)) 
    return this.textNode.getFrameNode(); 
  } 
 
  update(message: string) { 
    if (this.textNode !== null) { 
      this.textNode.update(new Params(message)); 
    } 
  } 
} 
 
class ImageNodeController extends NodeController { 
  private imageNode: BuilderNode<[Params]> | null = null; 
 
  constructor() { 
    super() 
  } 
 
  makeNode(context: UIContext): FrameNode | null { 
    this.imageNode = new BuilderNode(context); 
    this.imageNode.build(wrapBuilder<[Params]>(buildImage)) 
    return this.imageNode.getFrameNode(); 
  } 
 
  update(message: string) { 
    if (this.imageNode !== null) { 
      this.imageNode.update(new Params(message)); 
    } 
  } 
} 
 
@Entry 
@Component 
struct BuilderNodeTest { 
  @State message: string = "hello" 
  private textNodeController: TextNodeController = new TextNodeController(this.message); 
  private imageNodeController: ImageNodeController = new ImageNodeController(); 
  private count = 0; 
  @State isAddText: boolean = false 
  @State isAddImage: boolean = false 
 
  build() { 
    Column(){ 
      Row() { 
        Button('addText') 
          .onClick(() => { 
            this.isAddText = true 
          }) 
        Button('addImage') 
          .onClick(() => { 
            this.isAddImage = true 
          }) 
        Button('UpdateText') 
          .onClick(() => { 
            this.count += 1; 
            const message = "Update " + this.count.toString(); 
            this.textNodeController.update(message); 
          }) 
      } 
      Column() { 
        if(this.isAddText) { 
          NodeContainer(this.textNodeController) 
            .width('100%') 
            .backgroundColor('#FFF0F0F0') 
        } 
        if(this.isAddImage) { 
          NodeContainer(this.imageNodeController) 
            .width(300) 
            .height(200) 
        } 
      } 
      .width('100%') 
      .height('100%') 
    } 
  } 
}
分享
微博
QQ
微信
回复
2024-09-02 17:03:19
相关问题
HarmonyOS 关于调试UI细节相关
219浏览 • 1回复 待解决
HarmonyOS 容器如何撑满父容器
229浏览 • 1回复 待解决
HarmonyOSTypeScriptArkTS适配
336浏览 • 1回复 待解决
HarmonyOS Image组件调用异步方法
142浏览 • 1回复 待解决
HarmonyOS 关于Web动态创建
339浏览 • 1回复 待解决
docker容器MySQL、Redis无法连接
3363浏览 • 1回复 待解决