HarmonyOS NEXT鸿蒙开发：List列表、ListItem、ListItemGroup案例-实现微信发现界面-马育民老师

# 介绍

实现下图界面：

[![](https://www.malaoshi.top/upload/0/0/1GW2QDEvy1SA.jpg)](https://www.malaoshi.top/upload/0/0/1GW2QDEvy1SA.jpg)

# 代码

```
@Builder
faxianListItem(text:string){
  ListItem(){
    Row() {
      Image($r("app.media.startIcon"))
        .width(20)
        .margin({
          right:20
        })
      Text(text)
      Blank()
      Image($r("app.media.startIcon"))
        .width(20)
    }
    .rowStyle()
  }
}

@Styles
rowStyle(){
    .width("100%")
    .padding({
      left:20,
      right:20,
    })
    .height(50)
    .backgroundColor("#fff")
}

List(){
  ListItemGroup({
	space:2
  }){
	this.faxianListItem("朋友圈")
  }
  .margin({
	top:20
  })

ListItemGroup({
	space:2
  }){
	this.faxianListItem("扫一扫")
	this.faxianListItem("摇一摇")
  }
  .margin({
	top:20
  })

ListItemGroup({
	space:2
  }){
	this.faxianListItem("看一看")
	this.faxianListItem("搜一搜")
  }
  .margin({
	top:20
  })

ListItemGroup({
	space:2
  }){
	this.faxianListItem("购物")
	this.faxianListItem("游戏")
  }
  .margin({
	top:20
  })
}
.height("100%")
```

原文出处：http://www.malaoshi.top/show_1GW2QDHM9Q5N.html