如下代码:
List(){
ForEach(this.indexList, (item: number) =>{
ListItem(){
Text("测试")
Row(){
Image(this.images[item])
.width(20)
.height(20)
.margin({left:15})
Text(this.arr[item])
//.width('80%')
.fontSize(sizes.oneFontSize)
.fontColor(colors.TitleTextColor)
.margin({left:5.5})
.textOverflow({overflow: TextOverflow.Ellipsis })
.maxLines(1)
.layoutWeight(1)
Image($r("app.media.mine_qrcode_arrow"))
.width(10)
.height(10)
.margin({right:15})
}
.width('100%')
}
.height(60)
.onClick((event:ClickEvent)=>{
let index= this.indexList.indexOf(item);
console.info("onClick index="+`${index}`)
})
})
}
.width('100%')
.height(60*(this.arr.length))
.margin({top:2})
.divider({strokeWidth:0.5, color:colors.grayLineBackgroundColor})
标红的代码会导致编译错误:
The 'ListItem' component can have only one child component. <ArkTSCheck>
解决思路:
把button、Text、Image等组件放到一个容器组件里,如Row、Column、Stack中,这样就能正常编译了。