如何在Flutter中的Listview.builder中设置条件语句

Question

我正试图在Flutter中创建一个Todo应用程序，在我的应用程序栏中我有一个导航抽屉。在导航抽屉里，我有三个不同的过滤选项："全部"、"完成"one_answers"撤消"。当用户按下"完成"时，所有被检查为"完成"的待办事项都应该显示在页面上。

每个待办事项都存储在一个名为"待办事项列表"的列表中。到目前为止，我正在使用Listview显示所有待办事项。builder:

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

)，

到目前为止，我已经成功地添加了名为"filterDone"的列表中的所有已检查项目，以及名为"filter Undone"的名单中的所有未检查项目。我还有一个过滤器变量，每当用户按下"全部"、"完成"或"撤消"时，它都会更改值：

我的问题是：我不知道如何真正让导航抽屉中的过滤按钮工作。我试图将检查筛选变量值的if/else语句添加到我的Listview.builder中，以便返回正确的列表：

body: ListView.builder(
itemCount: TodoItemsList.length,
itemBuilder: (context, index) {

if(filter == 'All') {
return getCard(TodoItemsList[index]);
} else if (filter == 'Done') {
return getCard(filterDone[index]);
} else if (filter == 'Undone') {
return getCard(filterUndone[index]); 
} else {
return Container();
}

},
),

然而，这不起作用，我知道这是一个死代码，因为我在任何地方都没有setState或重建函数，但我不知道该把它添加到哪里

if(filter == 'All') {
setState(() {
return getCard(TodoItemsList[index]);
});

但它只是返回错误消息：返回类型"Widget"不是闭包上下文所要求的"void"。

我很感激你的帮助，如果有什么不清楚的地方，我可以为我的问题添加更多的代码。现在，我的代码还不够模块化，无法将所有内容粘贴到问题中。

Answer 1

首先尝试创建一个状态变量，例如currentList。然后，您可以使用setState根据您的过滤器将每个列表分配给变量。

前任。

var currentList;
if(filter == 'All') {
setState(() {
currentList = todoItemsList;
});
...
...
return getCard(currentList[index]);

Answer 2

当然，最好的方法是使用某种状态管理，如Bloc、Provider等，这取决于您的小部件是如何硬连接构建的。但对于经典的setState，这应该不是问题。这将是一种简单的方法：

您可以为自己定义一个枚举来查找当前过滤器：

enum Filter {
All,
Done,
Undone,
}

你需要一个变量来找出当前的过滤器，当然还有你的数据集。在我的例子中，TodoItems只包含一个标题和一个布尔值isChecked。

Filter currentFilter = Filter.All;
List<TodoItem> todoItems = [
TodoItem("Todo Item 1", false),
TodoItem("Todo Item 2", false),
TodoItem("Todo Item 3", true),
TodoItem("Todo Item 4", false),
TodoItem("Todo Item 5", true),
TodoItem("Todo Item 6", false),
];

此外，我还定义了第二个列表filteredItems，稍后将其传递给ListView。

List<TodoItem> filteredItems = [];

每次按下Drawer中的ListTile时，我都会更改过滤器并获取匹配的记录，然后将其传递到filteredItems列表。

void filterItems(Filter filter) {
currentFilter = filter;
switch (currentFilter) {
case Filter.All:
filteredItems = List.from(todoItems);
break;
case Filter.Done:
filteredItems =
todoItems.where((element) => element.isSelected).toList();
break;
case Filter.Undone:
filteredItems =
todoItems.where((element) => !element.isSelected).toList();
break;
default:
}
setState(() {});
}
}

dartpad上的完整示例：https://dartpad.dev/?id=4c230e7cd75eb0b6bbeb84f7eaa46583