HarmonyOS NEXT鸿蒙开发:List列表、ListItem 综合案例:通讯录(3)-优化代码:@Builder装饰器(复用的 UI 片段) 作者:马育民 • 2025-12-01 11:40 • 阅读:10003 ``` 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