如何使用代码方式向容器组件中动态创建组件？（HarmonyOS 鸿蒙Next）

如何使用代码方式向容器组件中动态创建组件？（HarmonyOS 鸿蒙Next） 在同一个窗体（非Web），比如通过Button点击事件，往一个页面的RelativeContainer组件中添加一个自定义的Image组件。

2 回复

动态创建组件大概有三种方式

  1. if/else条件渲染 参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-ifelse-V5?catalogVersion=V5

  2. ForEach循环渲染 参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-rendering-control-foreach-V5

  3. 通过NodeContainer挂载节点 参考 https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-arkui-nodecontroller-V5?catalogVersion=V5

也可以参考如下demo:

@Entry
@Component
struct BuilderDemo {

  @State isShow: boolean = false;
  @State count:number[] = [1];
  @Builder
  showTextBuilder() {
    Image($rawfile('background.png'))
      .width(50)
      .height(50)

  }

  build() {
    RelativeContainer() {
      Column() {
        if(this.isShow) {

          this.showTextBuilder()
        }
        ForEach(this.count,(item:number)=>{
          this.showTextBuilder()
        })

      }

      Button('添加组件 if')
        .onClick(()=>{
          this.isShow = true;
        })
        .margin({left:70})

      Button('添加组件 foreach')
        .onClick(()=>{
          this.count.push(1);
        })
        .margin({left:70,top:50})
    }
    .height('100%')
    .width('100%')

  }
}

更多关于如何使用代码方式向容器组件中动态创建组件？（HarmonyOS 鸿蒙Next）的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS（鸿蒙Next）中，可以通过代码方式动态向容器组件中添加组件。以下是一个简单的示例，展示如何使用DirectionalLayout作为容器，并动态添加Text组件。

import { DirectionalLayout, Text } from '@ohos.arkui.directional';

// 创建容器组件
let container = new DirectionalLayout();

// 设置容器的布局属性
container.width = '100%';
container.height = '100%';
container.orientation = DirectionalLayout.VERTICAL;

// 动态创建Text组件
let text1 = new Text();
text1.text = '动态创建的Text组件1';
text1.fontSize = 20;
text1.textColor = '#000000';

let text2 = new Text();
text2.text = '动态创建的Text组件2';
text2.fontSize = 20;
text2.textColor = '#000000';

// 将Text组件添加到容器中
container.addComponent(text1);
container.addComponent(text2);

// 将容器添加到页面中
page.appendChild(container);

在这个示例中，首先创建了一个DirectionalLayout作为容器，然后动态创建了两个Text组件，并将它们添加到容器中。最后，将容器添加到页面中。通过这种方式，可以在运行时根据需要动态地向容器中添加组件。

回到顶部