HarmonyOS 鸿蒙Next 在顶层视图追加一个视图

如果只是让视图显示的话，添加ArkTS声明式ui是用条件+状态管理来控件渲染。所以可以通过if……else……或者某个数据的true/false来动态添加或者销毁。 或者 可以通过wrapBuilder封装全局@Builder来实现，不同的组件可以设置不同的@builder。 可以参考文档： https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-wrapbuilder-V5 动态添加view。 类似demo

// 定义一个空的builder
[@Builder](/user/Builder)
function defaultBuilder(): void {}

// 定义一个class，有对应的WrappedBuilder
export class DataModel {
  id: string = ''
  value: string = ''
  otherProp: string = ''
  builderWrap: WrappedBuilder<[string]> = wrapBuilder(defaultBuilder)

  constructor(id: string, value: string, builderWrap: WrappedBuilder<[string]>) {
    this.id = id
    this.value = value
    this.builderWrap = builderWrap
  }
}

[@Builder](/user/Builder)
function CustomBuilder(param: string) {
  Column() {
    Text(param)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
  }.height(50)
}

let customPageWrappedBuilder: WrappedBuilder<[string]> = wrapBuilder(CustomBuilder);

export function getNewsData(): Promise<DataModel[]> {
  let arr: DataModel[] = [new DataModel('1', 'test1', customPageWrappedBuilder), new DataModel('2', 'test2', customPageWrappedBuilder)]
  return new Promise(resolve => {
    resolve(arr)
  })
}

export function getNewsItem(id: string, value: string): Promise<DataModel> {
  return new Promise(resolve => {
    resolve(new DataModel(id, value, customPageWrappedBuilder))
  })
}

@Entry
@Component
struct WrapperBuilderPage {
  @State testData: DataModel[] = []
  @State count: number = 2

  async aboutToAppear() {
    this.testData = await getNewsData();
  }
  build() {
    Column() {
      Row() {
        Button('addView').onClick(async () => {
          this.count++
          let newsItem: DataModel = await getNewsItem('' + this.count, 'test' + this.count)
          this.testData.push(newsItem)
        })
        Button('removeView').onClick(async () => {
          this.count--
          this.testData.pop()
        })
      }
      Column() {
        ForEach(this.testData, (item: DataModel) => {
          item.builderWrap.builder(item.value)
        })
      }
    }
    .width('100%')
    .height('100%')
  }
}