HarmonyOS NEXT鸿蒙开发：List列表、ListItem 综合案例：通讯录（2）-实现拨打电话-马育民老师

# 介绍

实现下面界面

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

# 代码

```
import { BusinessError } from '@kit.BasicServicesKit';
import { call } from '@kit.TelephonyKit';

@Entry
@Component
struct Index {

build() {
    Column(){
      List({
        space:20
      }){
        ListItem(){
          Row() {
            Text("李雷")
            Blank()
            Text("13812345678")
              .margin({
                right:15
              })
          }
          .width("100%")
        }
        .onClick( ()=>{
          console.log("拨打电话：13812345678")
          call.makeCall("13812345678").then(() => {
            console.log(`makeCall success`);
          }).catch((err: BusinessError) => {
            console.error(`makeCall fail, promise: err->${JSON.stringify(err)}`);
          });
        })
        ListItem(){
          Row() {
            Text("韩梅梅")
            Blank()
            Text("13612345678")
              .margin({
                right:15
              })
          }
          .width("100%")
        }
        .onClick( ()=>{
          console.log("拨打电话：13612345678")
          call.makeCall("13612345678").then(() => {
            console.log(`makeCall success`);
          }).catch((err: BusinessError) => {
            console.error(`makeCall fail, promise: err->${JSON.stringify(err)}`);
          });
        })

ListItem(){
          Row() {
            Text("lucy")
            Blank()
            Text("13512345678")
              .margin({
                right:15
              })
          }
          .width("100%")
        }
        .onClick( ()=>{
          console.log("拨打电话：13512345678")
          call.makeCall("13512345678").then(() => {
            console.log(`makeCall success`);
          }).catch((err: BusinessError) => {
            console.error(`makeCall fail, promise: err->${JSON.stringify(err)}`);
          });
        })

ListItem(){
          Row() {
            Text("lili")
            Blank()
            Text("13312345678")
              .margin({
                right:15
              })
          }
          .width("100%")
        }
        .onClick( ()=>{
          console.log("拨打电话：13312345678")
          call.makeCall("13312345678").then(() => {
            console.log(`makeCall success`);
          }).catch((err: BusinessError) => {
            console.error(`makeCall fail, promise: err->${JSON.stringify(err)}`);
          });
        })

}
      .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_1GW2KIetRlAN.html