如下代码:
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中,这样就能正常编译了。