Flutter微信项目实战：打造功能强大的通讯录（中）

2024-01-07 08:53:38

引言

在上一篇教程中，我们创建了Flutter微信项目的框架并实现了基本的UI界面。在本教程中，我们将深入探讨如何构建通讯录界面，包括好友合并和分组功能的实现。

好友合并

好友合并是通讯录中不可或缺的功能，它允许用户将重复的好友联系人合并为一个，避免通讯录混乱。Flutter中实现好友合并的方法如下：

// 定义好友数据模型
class Friend {
  String id;
  String name;
  String avatar;
}

// 将重复的好友合并为一个
List<Friend> mergeFriends(List<Friend> friends) {
  Map<String, Friend> friendMap = {};
  for (Friend friend in friends) {
    if (!friendMap.containsKey(friend.id)) {
      friendMap[friend.id] = friend;
    }
  }
  return friendMap.values.toList();
}

分组实现

分组功能允许用户将好友按不同标准（如姓名首字母、部门或自定义标签）进行分组，方便查找和管理。Flutter中实现分组的方法如下：

// 定义分组数据模型
class Group {
  String name;
  List<Friend> friends;
}

// 将好友按分组分类
List<Group> groupFriends(List<Friend> friends) {
  Map<String, Group> groupMap = {};
  for (Friend friend in friends) {
    String groupKey = friend.name[0].toUpperCase();
    if (!groupMap.containsKey(groupKey)) {
      groupMap[groupKey] = Group(name: groupKey, friends: []);
    }
    groupMap[groupKey].friends.add(friend);
  }
  return groupMap.values.toList();
}

通讯录界面搭建

有了好友合并和分组功能，我们可以开始构建通讯录界面。界面主要分为两部分：分组列表和好友列表。

分组列表

// 分组列表组件
class GroupList extends StatelessWidget {
  final List<Group> groups;

  const GroupList({required this.groups});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: groups.length,
      itemBuilder: (context, index) {
        return GroupListItem(group: groups[index]);
      },
    );
  }
}

好友列表

// 好友列表组件
class FriendList extends StatelessWidget {
  final List<Friend> friends;

  const FriendList({required this.friends});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: friends.length,
      itemBuilder: (context, index) {
        return FriendListItem(friend: friends[index]);
      },
    );
  }
}

结合分组和好友列表

// 通讯录主界面
class ContactsPage extends StatelessWidget {
  final List<Group> groups;

  const ContactsPage({required this.groups});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('通讯录')),
      body: Column(
        children: [
          GroupList(groups: groups),
          FriendList(friends: groups[0].friends),
        ],
      ),
    );
  }
}