社团成员页面是社团管理应用中的重要功能模块，用户可以查看社团的所有成员信息。这篇文章带大家实现社团成员列表模块。

页面整体结构

成员页面需要展示某个社团的所有成员，我们用StatelessWidget来实现：

class ClubMembersPage extends StatelessWidget {
  final String clubId;
  final String clubName;

页面接收两个参数，clubId用于筛选成员数据。
clubName用于显示页面标题，让用户知道当前查看的是哪个社团。

构造函数的定义：

  const ClubMembersPage({
    super.key, 
    required this.clubId, 
    required this.clubName
  });

required关键字确保调用者必须传入这两个参数。
const构造函数可以让Flutter在重建时复用Widget实例。

导入依赖包

在文件开头导入需要的包：

import 'package:flutter/material.dart';

material.dart提供Material Design风格的组件。
包括Scaffold、AppBar、ListView、Card、ListTile等。

import 'package:provider/provider.dart';

provider用于状态管理。
通过它可以在组件树中共享和监听数据变化。

import 'package:intl/intl.dart';

intl包提供日期格式化功能。
用于格式化成员的加入时间。

导入项目内部文件：

import '../../providers/app_provider.dart';

app_provider包含成员数据。
使用相对路径引入，…/…/表示向上两级目录。

构建页面骨架

使用Scaffold搭建基本结构：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('$clubName - 成员')
      ),

Scaffold是Material Design的基础布局组件。
标题用字符串插值显示社团名称加"成员"后缀。

数据监听

使用Consumer监听AppProvider的数据变化：

      body: Consumer<AppProvider>(
        builder: (context, provider, _) {

Consumer会在数据变化时自动重建子组件。
第三个参数用下划线表示不使用。

筛选成员数据

从全局成员列表中筛选当前社团的成员：

          final members = provider.members
              .where((m) => m.clubId == clubId)
              .toList();

where方法筛选出属于当前社团的成员。
toList()将结果转换为List类型。

空状态处理

当没有成员时显示友好提示：

          if (members.isEmpty) {
            return const Center(
              child: Text(
                '暂无成员', 
                style: TextStyle(color: Colors.grey)
              )
            );
          }

空状态处理是良好用户体验的重要组成部分。
虽然正常情况下社团至少有创建者，但做好空状态处理是好习惯。

成员分组

将成员按角色分为管理层和普通成员：

          final leaders = members
              .where((m) => m.role != '成员')
              .toList();

管理层包括社长、副社长、部长等非普通成员角色。
这样分组可以让用户快速找到社团的管理人员。

普通成员的筛选：

          final normalMembers = members
              .where((m) => m.role == '成员')
              .toList();

角色等于"成员"的就是普通成员。
分组显示让页面层次更清晰。

列表布局

使用ListView构建可滚动的成员列表：

          return ListView(
            padding: const EdgeInsets.all(16),
            children: [

ListView的children可以包含任意Widget。
padding设置16像素内边距。

管理层区块

先显示管理层成员：

              if (leaders.isNotEmpty) ...[
                const Text(
                  '管理层', 
                  style: TextStyle(
                    fontWeight: FontWeight.bold, 
                    fontSize: 16, 
                    color: Color(0xFF4A90E2)
                  )
                ),
                const SizedBox(height: 8),

Dart允许在列表中使用if语句，这个语法糖让条件渲染变得简洁。
管理层标题用蓝色粗体，视觉上更加突出。

展开管理层成员卡片：

                ...leaders.map((member) => _buildMemberCard(member)),
                const SizedBox(height: 16),
              ],

展开运算符…将成员卡片列表展开到children中。
区块之间用16像素的间距分隔。

普通成员区块

显示普通成员：

              if (normalMembers.isNotEmpty) ...[
                Text(
                  '普通成员 (${normalMembers.length})', 
                  style: const TextStyle(
                    fontWeight: FontWeight.bold, 
                    fontSize: 16
                  )
                ),
                const SizedBox(height: 8),

普通成员标题后面显示成员数量，方便了解社团规模。
标题用黑色粗体，和管理层的蓝色形成区分。

展开普通成员卡片：

                ...normalMembers.map((member) => _buildMemberCard(member)),
              ],
            ],
          );
        },
      ),
    );
  }

同样使用展开运算符将卡片列表展开。
整个页面结构清晰，管理层在上，普通成员在下。

成员卡片组件

定义构建成员卡片的方法：

  Widget _buildMemberCard(member) {
    return Card(
      margin: const EdgeInsets.only(bottom: 8),
      child: ListTile(

Card组件提供Material Design风格的卡片效果。
margin设置卡片之间8像素的间距。

成员头像

leading位置放置圆形头像：

        leading: CircleAvatar(
          backgroundColor: const Color(0xFF4A90E2).withOpacity(0.1),
          child: Text(
            member.userName[0], 
            style: const TextStyle(
              color: Color(0xFF4A90E2), 
              fontWeight: FontWeight.bold
            )
          ),
        ),

CircleAvatar显示成员姓名的首字母。
蓝色背景和蓝色文字形成统一的视觉风格。

成员信息

title和subtitle显示成员姓名和加入时间：

        title: Text(member.userName),
        subtitle: Text(
          '加入时间: ${DateFormat('yyyy-MM-dd').format(member.joinTime)}'
        ),

姓名作为主要信息显示在title位置。
加入时间用DateFormat格式化为年月日格式。

角色标签

trailing位置显示成员角色：

        trailing: Container(
          padding: const EdgeInsets.symmetric(
            horizontal: 8, 
            vertical: 4
          ),
          decoration: BoxDecoration(
            color: member.role != '成员' 
                ? const Color(0xFF4A90E2).withOpacity(0.1) 
                : Colors.grey.withOpacity(0.1),
            borderRadius: BorderRadius.circular(4),
          ),

管理层用蓝色背景，普通成员用灰色背景。
圆角设为4像素，让标签看起来更柔和。

标签文字样式：

          child: Text(
            member.role, 
            style: TextStyle(
              color: member.role != '成员' 
                  ? const Color(0xFF4A90E2) 
                  : Colors.grey, 
              fontSize: 12
            )
          ),
        ),
      ),
    );
  }
}

管理层角色用蓝色文字，普通成员用灰色文字。
12像素的字号适合标签这种辅助信息。

分组显示的优势

将成员分为管理层和普通成员两组显示有几个好处。
首先是信息层级清晰，用户可以快速找到社团负责人。

其次是视觉上更有条理，不会让长列表显得单调。
最后是符合社团的组织结构，体现成员之间的关系。

头像设计的考虑

使用姓名首字母作为头像是常见的设计方案。
在没有真实头像的情况下，这种方式既能区分不同成员，又不会显得单调。

蓝色的配色和整体风格保持一致。
如果将来需要支持真实头像，可以用backgroundImage属性。

日期格式化的处理

使用intl包的DateFormat类是Flutter中的最佳实践。
相比手动拼接字符串，DateFormat更加可靠。

如果需要显示相对时间如"3天前加入"，可以使用timeago包。
格式化逻辑集中在一处，方便后续修改。

列表性能说明

当前使用的是ListView而不是ListView.builder。
因为成员列表通常不会太长，这样做是可以的。

如果社团成员数量很多，建议改用ListView.builder提升性能。
另外成员分组的计算可以考虑缓存，避免每次重建时重新计算。

点击交互扩展

当前的成员卡片没有点击事件，可以添加以下交互：

ListTile(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => MemberDetailPage(member: member)
      )
    );
  },
  // 其他属性
)

点击成员可以查看详细资料。
跳转到成员详情页面显示更多信息。

长按操作菜单

长按可以弹出操作菜单：

ListTile(
  onLongPress: () {
    showModalBottomSheet(
      context: context,
      builder: (context) => Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          ListTile(
            leading: Icon(Icons.message),
            title: Text('发送消息'),
            onTap: () {},
          ),
          ListTile(
            leading: Icon(Icons.person),
            title: Text('查看资料'),
            onTap: () {},
          ),
        ],
      ),
    );
  },
)

showModalBottomSheet显示底部弹出菜单。
提供发送消息、查看资料等快捷操作。

搜索功能

成员多时可以添加搜索功能：

AppBar(
  title: Text('$clubName - 成员'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        showSearch(
          context: context,
          delegate: MemberSearchDelegate(members),
        );
      },
    ),
  ],
)

搜索按钮放在AppBar右侧。
showSearch打开搜索界面。

排序功能

可以按不同维度排序成员：

PopupMenuButton<String>(
  onSelected: (value) {
    setState(() {
      sortBy = value;
    });
  },
  itemBuilder: (context) => [
    PopupMenuItem(value: 'name', child: Text('按姓名')),
    PopupMenuItem(value: 'joinTime', child: Text('按加入时间')),
    PopupMenuItem(value: 'role', child: Text('按角色')),
  ],
)

PopupMenuButton显示下拉菜单。
选择后按对应维度重新排序列表。

邀请成员功能

管理员可以邀请新成员：

FloatingActionButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (_) => InviteMemberPage(clubId: clubId)
      )
    );
  },
  child: Icon(Icons.person_add),
)

浮动按钮放在页面右下角。
点击后跳转到邀请成员页面。

成员统计信息

可以在页面顶部显示统计：

Card(
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Column(
          children: [
            Text(
              '${members.length}',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold
              )
            ),
            Text('总人数'),
          ],
        ),
        Column(
          children: [
            Text(
              '${leaders.length}',
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold
              )
            ),
            Text('管理层'),
          ],
        ),
      ],
    ),
  ),
)

统计卡片显示总人数和管理层人数。
让用户快速了解社团规模。

权限控制

不同角色看到的功能不同：

if (currentUserRole == '社长' || currentUserRole == '副社长')
  IconButton(
    icon: Icon(Icons.settings),
    onPressed: () {
      // 打开成员管理设置
    },
  ),

只有社长和副社长能看到管理按钮。
普通成员只能查看列表。

移除成员功能

管理员可以移除成员：

ListTile(
  leading: Icon(Icons.remove_circle, color: Colors.red),
  title: Text('移除成员'),
  onTap: () {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('确认移除'),
        content: Text('确定要移除该成员吗？'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('取消'),
          ),
          TextButton(
            onPressed: () {
              // 执行移除操作
              Navigator.pop(context);
            },
            child: Text('确定'),
          ),
        ],
      ),
    );
  },
)

移除前弹出确认对话框。
避免误操作导致成员被错误移除。

修改角色功能

管理员可以修改成员角色：

ListTile(
  leading: Icon(Icons.edit),
  title: Text('修改角色'),
  onTap: () {
    showDialog(
      context: context,
      builder: (context) => SimpleDialog(
        title: Text('选择角色'),
        children: [
          SimpleDialogOption(
            child: Text('社长'),
            onPressed: () {},
          ),
          SimpleDialogOption(
            child: Text('副社长'),
            onPressed: () {},
          ),
          SimpleDialogOption(
            child: Text('部长'),
            onPressed: () {},
          ),
          SimpleDialogOption(
            child: Text('成员'),
            onPressed: () {},
          ),
        ],
      ),
    );
  },
)

SimpleDialog显示角色选择列表。
选择后更新成员的角色信息。

下拉刷新

添加下拉刷新功能：

RefreshIndicator(
  onRefresh: () async {
    await provider.refreshMembers(clubId);
  },
  child: ListView(
    // 列表内容
  ),
)

RefreshIndicator包裹ListView。
下拉时触发数据刷新。

小结

社团成员页面通过分组列表的形式展示成员信息。管理层和普通成员分开显示，视觉层次分明。每个成员卡片显示头像、姓名、加入时间和角色标签，不同角色用不同颜色标识，方便用户快速识别。

---

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net