Flutter中如何实现点击帖子「X人点赞」查看点赞用户列表并跳转用户页

以下是可直接复用的实现逻辑：

第一步：定义基础数据结构 #

首先定义用户、帖子数据模型，方便数据传递：

class UserModel {
  final String userId;
  final String userName;
  final String avatarUrl;
  UserModel({
    required this.userId,
    required this.userName,
    required this.avatarUrl,
  });
}

class PostModel {
  final String postId;
  final int likeCount;
  final List<UserModel> likedUsers;
  PostModel({
    required this.postId,
    required this.likeCount,
    required this.likedUsers,
  });
}

第二步：实现帖子点赞区域点击交互 #

用GestureDetector包裹「X人点赞」显示区域，点击后弹出底部模态列表：

// 帖子组件内的点赞数显示部分
GestureDetector(
  onTap: () {
    // 弹出底部点赞用户列表
    showModalBottomSheet(
      context: context,
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
      ),
      builder: (context) => LikedUsersList(users: post.likedUsers),
    );
  },
  child: Text(
    '${post.likeCount}人点赞',
    style: const TextStyle(color: Colors.blue, fontSize: 14),
  ),
)

第三步：实现点赞用户列表组件 #

列表用ListView.builder做懒加载，每个用户项支持点击跳转：

class LikedUsersList extends StatelessWidget {
  final List<UserModel> users;
  const LikedUsersList({super.key, required this.users});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      height: MediaQuery.of(context).size.height * 0.6,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const Text('全部点赞用户', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
          const SizedBox(height: 12),
          Expanded(
            child: ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) {
                final user = users[index];
                return InkWell(
                  onTap: () {
                    // 关闭弹窗再跳转到用户详情页
                    Navigator.pop(context);
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => UserDetailPage(userId: user.userId),
                      ),
                    );
                  },
                  child: Padding(
                    padding: const EdgeInsets.symmetric(vertical: 8),
                    child: Row(
                      children: [
                        CircleAvatar(
                          backgroundImage: NetworkImage(user.avatarUrl),
                          radius: 20,
                        ),
                        const SizedBox(width: 12),
                        Text(user.userName, style: const TextStyle(fontSize: 14)),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

可选优化点 #

• 如果点赞用户数量过万，不需要一次性返回全量用户，可做分页加载，在列表滚动到底部时请求下一页数据
• 头像添加缓存逻辑，避免重复加载
• 可给点击操作加防抖，避免重复触发跳转

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