HarmonyOS NEXT鸿蒙开发:List列表、ListItem 综合案例:通讯录(2)-实现拨打电话

介绍

实现下面界面

代码

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)
  }
}

原文出处:/show_1GW2KIetRlAN.html