HarmonyOS view动态添加

动态添加子view该怎么写呢?

HarmonyOS
2天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
aquaa

可以通过wrapBuilder封装全局@Builder来实现,不同的组件可以设置不同的@builder。

可以参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-wrapbuilder-V5

可以参考以下代码:

// 定义一个空的builder
@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
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%')
  }
}
分享
微博
QQ
微信
回复
2天前
相关问题
HarmonyOS 如何添加一个悬浮的View
30浏览 • 1回复 待解决
HarmonyOS 如何动态添加组件?
21浏览 • 1回复 待解决
Harmony Navigation组件动态添加
164浏览 • 1回复 待解决
DirectionalLayout 动态添加组件问题
4578浏览 • 1回复 待解决
动态申请权限能否添加描述
775浏览 • 1回复 待解决
ets怎么实现动态添加组件?
3536浏览 • 1回复 待解决
HarmonyOS 有没有办法动态添加组件?
541浏览 • 1回复 待解决
JS swiper 怎么像list一样动态添加item?
6366浏览 • 1回复 待解决
HarmonyOS 单纯的渐变View
462浏览 • 2回复 待解决
HarmonyOS web_view设置超时问题
404浏览 • 1回复 待解决