HarmonyOS NEXT鸿蒙开发:List列表、ListItem 综合案例:通讯录(1)-实现界面 作者:马育民 • 2025-12-01 11:37 • 阅读:10003 # 介绍 实现下面界面 [](https://www.malaoshi.top/upload/0/0/1GW2KIaZrBZC.png) # 代码 ``` @Entry @Component struct Index { build() { Column(){ List({ space:20 }){ ListItem(){ Row() { Text("李雷") Blank() Text("13812345678") .margin({ right:15 }) } .width("100%") } .onClick( ()=>{ console.log("拨打电话:13812345678") }) ListItem(){ Row() { Text("韩梅梅") Blank() Text("13612345678") .margin({ right:15 }) } .width("100%") } .onClick( ()=>{ console.log("拨打电话:13612345678") }) ListItem(){ Row() { Text("lucy") Blank() Text("13512345678") .margin({ right:15 }) } .width("100%") } .onClick( ()=>{ console.log("拨打电话:13512345678") }) ListItem(){ Row() { Text("lili") Blank() Text("13312345678") .margin({ right:15 }) } .width("100%") } .onClick( ()=>{ console.log("拨打电话: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_1GW2KId6X1nI.html