如下代码：

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中，这样就能正常编译了。