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

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