#

案例概述

本案例展示如何创建带头像、状态指示的用户列表。用户列表是社交、通讯、团队协作等应用的核心组件。通过在列表中显示用户头像、名称、状态等信息，可以快速识别用户并了解其状态。在 Flutter 中，可以使用 CircleAvatar 组件显示圆形头像，使用 Stack 和 Positioned 在头像上叠加状态指示器。

带头像的列表需要处理网络图片加载、图片缓存、多种状态指示、响应式布局等问题。此外，还应支持点击事件、长按菜单、搜索过滤等交互功能。

核心概念

1. CircleAvatar

• 圆形头像组件；
• 支持背景色、图片、文字；
• 支持自定义半径。

2. 状态指示

• 在头像上显示状态点；
• 使用 Positioned 定位；
• 支持多种状态颜色。

3. ListTile 增强

• 添加头像、标题、副标题；
• 添加尾部组件（如 Chip）；
• 支持点击事件。

代码详解

1. 基础头像列表

ListTile(
  leading: CircleAvatar(
    backgroundColor: Colors.blue.shade200,
    child: Text(user['name']![0]),
  ),
  title: Text(user['name']!),
  subtitle: Text(user['email']!),
)

2. 状态指示

Stack(
  children: [
    CircleAvatar(radius: 24, child: Text(user['name']![0])),
    Positioned(
      right: 0,
      bottom: 0,
      child: Container(
        width: 12,
        height: 12,
        decoration: BoxDecoration(
          color: statusColor,
          shape: BoxShape.circle,
          border: Border.all(color: Colors.white, width: 2),
        ),
      ),
    ),
  ],
)

3. 状态 Chip

Chip(
  label: Text(user['status']!),
  backgroundColor: statusColor.withOpacity(0.2),
  labelStyle: TextStyle(color: statusColor),
)

高级话题：头像列表的企业级应用

1. 网络头像

CircleAvatar(
  backgroundImage: NetworkImage(user['avatarUrl']),
  onBackgroundImageError: (exception, stackTrace) {
    // 处理加载失败
  },
)

2. 头像缓存

CircleAvatar(
  backgroundImage: CachedNetworkImageProvider(user['avatarUrl']),
)

3. 头像上传

GestureDetector(
  onTap: () => _uploadAvatar(),
  child: Stack(
    children: [
      CircleAvatar(backgroundImage: ...),
      Positioned(
        right: 0,
        bottom: 0,
        child: Icon(Icons.camera_alt),
      ),
    ],
  ),
)

4. 多状态显示

final statusColors = {
  '在线': Colors.green,
  '离线': Colors.grey,
  '忙碌': Colors.orange,
  '隐身': Colors.blue,
};

5. 用户搜索过滤

List<Map<String, String>> get _filteredUsers {
  return _users.where((user) {
    return user['name'].toLowerCase().contains(_searchQuery.toLowerCase());
  }).toList();
}

6. 用户排序

void _sortUsers(String sortBy) {
  setState(() {
    if (sortBy == 'name') {
      _users.sort((a, b) => a['name'].compareTo(b['name']));
    } else if (sortBy == 'status') {
      _users.sort((a, b) => a['status'].compareTo(b['status']));
    }
  });
}

7. 用户选择

Set<String> _selectedUsers = {};

ListTile(
  leading: Checkbox(
    value: _selectedUsers.contains(user['id']),
    onChanged: (selected) {
      setState(() {
        if (selected ?? false) {
          _selectedUsers.add(user['id']);
        } else {
          _selectedUsers.remove(user['id']);
        }
      });
    },
  ),
  title: Text(user['name']),
)

8. 用户操作菜单

PopupMenuButton<String>(
  itemBuilder: (context) => [
    PopupMenuItem(value: 'message', child: Text('发送消息')),
    PopupMenuItem(value: 'call', child: Text('拨打电话')),
    PopupMenuItem(value: 'block', child: Text('屏蔽')),
  ],
  onSelected: (value) => _handleUserAction(user, value),
)

9. 用户详情页

ListTile(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => UserDetailPage(user: user),
      ),
    );
  },
  title: Text(user['name']),
)

10. 用户列表的测试

test('用户列表排序', () {
  _sortUsers('name');
  expect(_users[0]['name'], '李四');
});

通过这些企业级技巧，你可以构建出功能完整的用户列表系统。

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