HarmonyOS NEXT鸿蒙开发:List列表、ListItem 综合案例:通讯录(3)-优化代码:@Builder装饰器(复用的 UI 片段)

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

@Entry
@Component
struct Index {
  // 复用代码,外部调用时,只需要传入姓名、电话号
  @Builder
  li(name:string,phone:string) {
    ListItem(){
      Row() {
        Text(name)
        Blank()
        Text(phone)
          .margin({
            right:15
          })
      }
      .width("100%")
    }
    .backgroundColor(Color.Red)
    .onClick( ()=>{
      console.log("拨打电话:"+phone)
      call.makeCall(phone).then(() => {
        console.log(`makeCall success`);
      }).catch((err: BusinessError) => {
        console.error(`makeCall fail, promise: err->${JSON.stringify(err)}`);
      });
    })
  }


  build() {
    Column(){
      List({
        space:20
      }){
        this.li("李雷","13812345678")
        this.li("韩梅梅","13612345678")
        this.li("lucy","13512345678")
        this.li("lili","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)
  }
}

原文出处:/show_1GW2KIlsDgpl.html