如何在Flutter中筛选Map列表中年龄符合大小条件的项并展示？

核心思路 #

• 维护两个列表：原始数据列表（存储HTTP获取的全部数据）、筛选后的数据列表（用于ListView展示）
• 通过按钮切换筛选条件，更新筛选后的数据列表并触发UI刷新

具体实现步骤 #

1. 定义状态变量 #

在页面的State类中声明关键变量：

class _UserListScreenState extends State<UserListScreen> {
  // 存储从HTTP获取的原始数据
  List<Map<String, dynamic>> originalUsers = [];
  // 存储筛选后的数据，用于ListView展示
  List<Map<String, dynamic>> filteredUsers = [];
  // 当前筛选标记：null=显示全部，true=年龄>25，false=年龄<25
  bool? filterType;

  @override
  void initState() {
    super.initState();
    // 假设此处已完成HTTP请求，将返回的JSON数据存入originalUsers
    // 初始化时展示全部数据
    filteredUsers = List.from(originalUsers);
  }
}

2. 实现筛选逻辑 #

编写方法根据筛选条件更新展示列表：

void updateFilteredList() {
  setState(() {
    if (filterType == null) {
      filteredUsers = List.from(originalUsers);
    } else {
      const int threshold = 25;
      filteredUsers = originalUsers.where((user) {
        // 将字符串类型的age转为整数
        int age = int.parse(user['age']);
        return filterType! ? age > threshold : age < threshold;
      }).toList();
    }
  });
}

3. 添加筛选按钮组 #

在UI中添加切换筛选条件的按钮：

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    ElevatedButton(
      onPressed: () {
        filterType = false;
        updateFilteredList();
      },
      child: const Text('年龄<25'),
      style: ElevatedButton.styleFrom(
        backgroundColor: filterType == false ? Colors.blue : null,
      ),
    ),
    const SizedBox(width: 12),
    ElevatedButton(
      onPressed: () {
        filterType = true;
        updateFilteredList();
      },
      child: const Text('年龄>25'),
      style: ElevatedButton.styleFrom(
        backgroundColor: filterType == true ? Colors.blue : null,
      ),
    ),
    const SizedBox(width: 12),
    ElevatedButton(
      onPressed: () {
        filterType = null;
        updateFilteredList();
      },
      child: const Text('显示全部'),
      style: ElevatedButton.styleFrom(
        backgroundColor: filterType == null ? Colors.blue : null,
      ),
    ),
  ],
)

4. 绑定筛选后的数据到ListView #

将ListView.builder的数据源替换为filteredUsers：

ListView.builder(
  itemCount: filteredUsers.length,
  itemBuilder: (context, index) {
    final user = filteredUsers[index];
    return ListTile(
      title: Text(user['name']),
      subtitle: Text('年龄：${user['age']} | 职业：${user['job']}'),
    );
  },
)

注意事项 #

• 处理类型转换异常：如果JSON中的age字段可能为空或非数字，建议添加try-catch避免崩溃
• HTTP请求完成后，要同步更新originalUsers和filteredUsers，确保初始展示数据正确

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