09-鸿蒙4.0学习之ForEach循环渲染
代码
/**
* 循环渲染
* todo:重点注意键值生成器返回的数据,保证唯一性,否则某些相同的数据会渲染不出来
*
*/
@Entry
@Component
struct Loop {
@State message: string = '循环渲染'
@State product:string[] = ['第一项','第二项','第三项','第四项','第四项']
@State arrList:object[]=[
{
id:'001',
title:'hellworld1',
content:'内容1'
},
{
id:'002',
title:'hellworld2',
content:'内容2'
},
{
id:'003',
title:'hellworld3',
content:'内容3'
}
]
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Divider()
ForEach(this.arrList,(item)=>{
Text(item.content).fontSize(30)
},(item)=>{
return item.id // 返回值为 字符串 表示唯一性 类似于ID
})
}
.width('100%')
}
.height('100%')
}
}