HarmonyOS鸿蒙Next中一种动态按需创建组件的方案

HarmonyOS鸿蒙Next中一种动态按需创建组件的方案

1、为什么需要动态化创建组件

  • 创建与使用分离
  • 按需创建、按需使用
  • 抽象化

2、如何动态化创建组件？一个完整的DEMO

2.1、涉及到的文件结构

  • pages
    • factory
      • components
        • DemoComponent01.ets
        • DemoComponent02.ets
        • DemoComponent03.ets
      • Manager.ets
    • Index.ets

2.2、各文件的代码

DemoComponent01.ets

@Component
export default struct DemoComponent01 {
  build(){
    Text('DemoComponent01').fontSize(30)
  }
}

DemoComponent02.ets

@Component
export default struct DemoComponent02 {
  build(){
    Text('DemoComponent02').fontSize(40)
  }
}

DemoComponent03.ets

@Component
export default struct DemoComponent03 {
  build(){
    Text('DemoComponent03').fontSize(50)
  }
}

Manager.ets

import DemoComponent01 from './components/DemoComponent01';
import DemoComponent02 from './components/DemoComponent02';
import DemoComponent03 from './components/DemoComponent03';

@Builder
function dBuilder01() {
  DemoComponent01()
}

@Builder
function dBuilder02() {
  DemoComponent02()
}

@Builder
function dBuilder03() {
  DemoComponent03()
}

const builders = new Map([
  ['DemoComponent01', () => wrapBuilder(dBuilder01)],
  ['DemoComponent02', () => wrapBuilder(dBuilder02)],
  ['DemoComponent03', () => wrapBuilder(dBuilder03)]
])

export default (componentName: string): WrappedBuilder<object[]> | undefined => {
  const builderFunc = builders.get(componentName);
  if(builderFunc) {
    return builderFunc()
  }
  return
}

Index.ets

import getComponentByName from './factory/Manager';

enum EComponentName {
  Component01 = 'DemoComponent01',
  Component02 = 'DemoComponent02',
  Component03 = 'DemoComponent03'
}

@Entry
@Component
struct Index {
  @State message: string = '';

  @Builder
  renderSelfComponent(){
    getComponentByName(this.message)?.builder()
  }

  build() {
    RelativeContainer() {
      Column(){
        TextInput({text: this.message})
          .id('HelloWorld')
          .fontSize(26)
          .fontWeight(FontWeight.Bold)
          .onChange((val) => {
            this.message = val
          })
        if (this.message === EComponentName.Component01) {
          Text(this.message).fontColor(Color.Red).fontSize(32)
          this.renderSelfComponent()
        }
        if (this.message === EComponentName.Component02) {
          Text(this.message).fontColor(Color.Green).fontSize(32)
          this.renderSelfComponent()
        }
        if (this.message === EComponentName.Component03) {
          Text(this.message).fontColor(Color.Orange).fontSize(32)
          this.renderSelfComponent()
        }

      }.alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })

    }
    .height('100%')
    .width('100%')
  }
}

更多关于HarmonyOS鸿蒙Next中一种动态按需创建组件的方案的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

不加if可以吗，毕竟动态的话理论上应该只留一个

更多关于HarmonyOS鸿蒙Next中一种动态按需创建组件的方案的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


map那里是个函数，函数执行才会真正创建对象吧，我理解是这样的。而需要的时候才会执行函数，才会执行wrapperBuilder函数。装饰器对应的应该只是声明。就像类与实例的关系。

在HarmonyOS鸿蒙Next中，动态按需创建组件的方案主要依赖于ArkUI框架的组件化设计。通过使用@Component装饰器，开发者可以定义可复用的UI组件，并在运行时根据需要动态创建和销毁这些组件。具体实现步骤如下：

  1. 定义组件：使用@Component装饰器定义一个UI组件，组件内部可以包含布局、样式和事件处理逻辑。例如：
@Component
struct MyComponent {
    build() {
        Column() {
            Text('Dynamic Component')
                .fontSize(20)
                .fontColor(Color.Black)
        }
    }
}
  1. 动态创建组件：在父组件中，通过条件渲染或状态管理，动态决定是否创建子组件。例如，使用if语句根据条件渲染组件：
@Entry
@Component
struct ParentComponent {
    @State showComponent: boolean = false;

    build() {
        Column() {
            Button('Toggle Component')
                .onClick(() => {
                    this.showComponent = !this.showComponent;
                });

            if (this.showComponent) {
                MyComponent();
            }
        }
    }
}

  1. 组件销毁：当条件不再满足时，组件会自动从UI树中移除，释放相关资源。开发者无需手动管理组件的生命周期。

  2. 组件复用：通过将组件定义为独立的模块，可以在多个地方复用，提高代码的可维护性和可读性。

  3. 性能优化：动态创建组件时，ArkUI框架会进行高效的UI更新，确保性能不受影响。开发者可以通过合理设计组件结构和状态管理，进一步优化性能。

这种动态按需创建组件的方案，适用于需要根据用户交互或数据变化动态调整UI的场景，能够有效提升应用的灵活性和响应速度。

在HarmonyOS鸿蒙Next中，可以通过@Builder装饰器实现动态按需创建组件。@Builder允许开发者定义一个可复用的组件构建函数，根据条件或数据动态生成UI组件。例如：

@Builder
function dynamicComponent(isVisible: boolean) {
  if (isVisible) {
    Text('Hello, HarmonyOS!')
  } else {
    Text('Component Hidden')
  }
}

在页面中使用时，可以根据状态动态调用该函数：

@State isVisible: boolean = true;

build() {
  Column() {
    dynamicComponent(this.isVisible)
  }
}

这种方式灵活且高效，适用于需要根据条件或数据动态生成UI的场景。

回到顶部