HarmonyOS NEXT鸿蒙开发：List列表、ListItem 综合案例：通讯录（1）-实现界面-马育民老师

# 介绍

实现下面界面

[![](https://www.malaoshi.top/upload/0/0/1GW2KIaZrBZC.png)](https://www.malaoshi.top/upload/0/0/1GW2KIaZrBZC.png)

# 代码

```
@Entry
@Component
struct Index {

build() {
    Column(){
      List({
        space:20
      }){
        ListItem(){
          Row() {
            Text("李雷")
            Blank()
            Text("13812345678")
              .margin({
                right:15
              })
          }
          .width("100%")
        }
        .onClick( ()=>{
          console.log("拨打电话：13812345678")
        })
        ListItem(){
          Row() {
            Text("韩梅梅")
            Blank()
            Text("13612345678")
              .margin({
                right:15
              })
          }
          .width("100%")
        }
        .onClick( ()=>{
          console.log("拨打电话：13612345678")
        })

ListItem(){
          Row() {
            Text("lucy")
            Blank()
            Text("13512345678")
              .margin({
                right:15
              })
          }
          .width("100%")
        }
        .onClick( ()=>{
          console.log("拨打电话：13512345678")
        })

ListItem(){
          Row() {
            Text("lili")
            Blank()
            Text("13312345678")
              .margin({
                right:15
              })
          }
          .width("100%")
        }
        .onClick( ()=>{
          console.log("拨打电话：13312345678")
        })

}
      .divider({ // 分割线
        strokeWidth: 1,
        color: "#ddd",
        startMargin: 5,
        endMargin: 5,
      })

}
    .padding({
      left:10,
      right:10,
    })
    // .backgroundColor(Color.Blue)
    // 设置column宽度占父容器的100%
    .width("100%")
    // 设置column高度占父容器的100%
    .height("100%")
    .alignItems(HorizontalAlign.Start)
    // 设置垂直居中
    // .justifyContent(FlexAlign.Center)
  }
}
```

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