Flutter中如何为ListView.builder设置条件过滤逻辑？

核心问题分析 #

你之前的错误在于在itemBuilder中调用setState——setState的回调要求返回void，但你试图在其中返回Widget，这就导致了类型不匹配的错误。正确的思路是：通过setState更新过滤状态，让组件重建时自动使用对应过滤后的数据源渲染列表，而不是在列表构建逻辑里直接处理状态更新。

具体实现方案 #

以下是两种可行的实现方式，选一种适合你的即可：

方式1：动态计算过滤列表（推荐）

不需要提前维护filterDone和filterUndone，每次根据当前过滤条件动态生成目标列表，避免数据不一致的问题：

1. 首先定义过滤类型的枚举（或用字符串常量，枚举更规范）：

enum FilterType { all, done, undone }

2. 在你的页面State类中声明当前过滤状态变量：

class _TodoPageState extends State<TodoPage> {
  FilterType currentFilter = FilterType.all;
  // 你的TodoItemsList定义在这里
  List<TodoItem> TodoItemsList = [];

  // 动态计算当前要显示的列表
  List<TodoItem> get filteredList {
    switch(currentFilter) {
      case FilterType.done:
        return TodoItemsList.where((item) => item.isDone).toList();
      case FilterType.undone:
        return TodoItemsList.where((item) => !item.isDone).toList();
      default:
        return TodoItemsList;
    }
  }
  // ...其他代码
}

3. 修改ListView.builder使用filteredList作为数据源：

body: ListView.builder(
  itemCount: filteredList.length,
  itemBuilder: (context, index) {
    return getCard(filteredList[index]);
  },
),

4. 处理导航抽屉的点击事件，更新过滤状态并关闭抽屉：

Drawer(
  child: ListView(
    children: [
      ListTile(
        title: const Text('All'),
        onTap: () {
          setState(() {
            currentFilter = FilterType.all;
          });
          Navigator.pop(context);
        },
      ),
      ListTile(
        title: const Text('Done'),
        onTap: () {
          setState(() {
            currentFilter = FilterType.done;
          });
          Navigator.pop(context);
        },
      ),
      ListTile(
        title: const Text('Undone'),
        onTap: () {
          setState(() {
            currentFilter = FilterType.undone;
          });
          Navigator.pop(context);
        },
      ),
    ],
  ),
)

方式2：使用已维护的过滤列表

如果你坚持保留filterDone和filterUndone，只需调整列表数据源的获取逻辑：

1. 在State类中维护过滤状态和列表：

class _TodoPageState extends State<TodoPage> {
  String filter = 'all'; // 'all'/'done'/'undone'
  List<TodoItem> TodoItemsList = [];
  List<TodoItem> filterDone = [];
  List<TodoItem> filterUndone = [];

  // 获取当前要显示的列表
  List<TodoItem> get currentList {
    switch(filter) {
      case 'done':
        return filterDone;
      case 'undone':
        return filterUndone;
      default:
        return TodoItemsList;
    }
  }
  // 注意：当TodoItemsList更新时，要同步更新filterDone和filterUndone，比如：
  void updateFilterLists() {
    filterDone = TodoItemsList.where((item) => item.isDone).toList();
    filterUndone = TodoItemsList.where((item) => !item.isDone).toList();
  }
  // ...其他代码
}

2. 同样修改ListView.builder：

body: ListView.builder(
  itemCount: currentList.length,
  itemBuilder: (context, index) {
    return getCard(currentList[index]);
  },
),

3. 抽屉点击事件更新filter：

ListTile(
  title: const Text('Done'),
  onTap: () {
    setState(() {
      filter = 'done';
    });
    Navigator.pop(context);
  },
),
// 其他选项类似

关键注意事项 #

• 所有状态变量（currentFilter/filter、待办列表）必须是页面State类的成员变量，这样setState才能触发组件重建。
• 不要在itemBuilder、build方法中调用setState，这会导致无限重建循环，状态更新应该放在用户交互事件（比如抽屉点击）中。

内容的提问来源于stack exchange，提问作者Ninna Svanström