能否在Flutter消息应用的共享屏幕表单中显示常用联系人？

完全可以实现类似WhatsApp、Messenger这类应用的常用联系人展示效果，以下是具体实现方案：

1. 定义常用联系人数据模型 #

首先创建联系人实体类，包含判断常用程度的核心字段：

class Contact {
  final String id;
  final String name;
  final String avatarUrl;
  final DateTime lastInteractionTime; // 最近互动时间
  final int interactionCount; // 互动次数

  Contact({
    required this.id,
    required this.name,
    required this.avatarUrl,
    required this.lastInteractionTime,
    required this.interactionCount,
  });
}

2. 筛选排序常用联系人 #

通过互动频率和最近互动时间加权排序，筛选出高频联系人：

List<Contact> getTopUsedContacts(List<Contact> allContacts) {
  // 过滤近30天有互动的联系人
  final recentContacts = allContacts.where((contact) {
    final timeDiff = DateTime.now().difference(contact.lastInteractionTime);
    return timeDiff.inDays <= 30;
  }).toList();

  // 先按互动次数降序，次数相同则按最近互动时间排序
  recentContacts.sort((a, b) {
    if (a.interactionCount != b.interactionCount) {
      return b.interactionCount.compareTo(a.interactionCount);
    }
    return b.lastInteractionTime.compareTo(a.lastInteractionTime);
  });

  // 取前10个作为常用联系人展示
  return recentContacts.take(10).toList();
}

3. 实现横向滚动的常用联系人UI #

用SingleChildScrollView配合Row实现横向滚动的头像列表，贴合主流应用的交互样式：

Widget buildFavoriteContactsBar(List<Contact> favoriteContacts) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      const Padding(
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Text(
          '常用联系人',
          style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
        ),
      ),
      SizedBox(
        height: 85,
        child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          padding: const EdgeInsets.symmetric(horizontal: 12),
          child: Row(
            children: favoriteContacts.map((contact) {
              return GestureDetector(
                onTap: () => _handleShareToContact(contact),
                child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8),
                  child: Column(
                    children: [
                      CircleAvatar(
                        radius: 28,
                        backgroundImage: NetworkImage(contact.avatarUrl),
                        child: contact.avatarUrl.isEmpty
                            ? Text(contact.name[0].toUpperCase())
                            : null,
                      ),
                      const SizedBox(height: 4),
                      SizedBox(
                        width: 60,
                        child: Text(
                          contact.name,
                          overflow: TextOverflow.ellipsis,
                          textAlign: TextAlign.center,
                          style: const TextStyle(fontSize: 12),
                        ),
                      ),
                    ],
                  ),
                ),
              );
            }).toList(),
          ),
        ),
      ),
    ],
  );
}

4. 整合到共享表单 #

将上述组件嵌入到共享屏幕表单的合适位置（比如输入框上方），和其他共享选项（相册、文件等）配合使用即可。

补充提示 #

• 若需读取系统通讯录的常用联系人，可使用contacts_service插件获取系统联系人列表，再结合应用内的互动数据排序
• 可添加「查看全部」按钮，点击后跳转至完整联系人选择页面

内容的提问来源于stack exchange，提问作者wuuyungwuu