HarmonyOS NEXT 原生应用开发：社交通讯录界面实现

import { List, ListItem, Text, Image, Button } from '@ohos.arkui';
 
@Entry
@Component
struct ContactList {
  @State contacts: Array<{ name: string; phone: string; avatar: string }> = [
    { name: 'Alice', phone: '123-456-7890', avatar: '$media:avatar1' },
    { name: 'Bob', phone: '234-567-8901', avatar: '$media:avatar2' },
    // ...更多联系人数据
  ];
 
  build() {
    List() {
      this.contacts.map((contact) => {
        ListItem() {
          Column({ verticalAlign: VerticalAlign.Center }) {
            Image(contact.avatar).width('50vp').height('50vp').margin({ right: '16vp' })
            Column() {
              Text(contact.name).fontSize('18vp').fontWeight(FontWeight.Bold)
              Text(contact.phone).fontSize('16vp').color(Color.Gray)
            }
            Button('Call/Message')
              .onClick(() => {
                Toast.show(`Called or messaged: ${contact.name}`);
                // 实际应用中，应实现具体的通话或消息发送功能
              })
              .margin({ left: 'auto' })
          }
        }
      })
    }
  }
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.