Dismissible和FutureBuilder不能一起工作

Question

这是一个复杂的问题，但我会尽力解释。

我的项目使用了一个sqflite数据库。这个特定的页面根据数据库中的数据返回一个可丢弃的小部件列表。这就是我读取数据的方式：

class TaskListState extends State<TaskList> {
DBProvider dbProvider = new DBProvider();
Future<List<Task>> allTasks;
@override
void initState() {
allTasks = dbProvider.getAllTasks();
super.initState();
}
void update(){
setState(() {
allTasks = dbProvider.getAllTasks();
});
}
//build
}

TaskList小部件返回一个带有FutureBuilder的页面，该页面使用数据库中的数据构建ListView.builder。ListView构建可丢弃的小部件。解除可解除的小部件会更新数据库中的一行，并再次读取数据以更新列表。

TaskListState 的生成方法

@override
Widget build(BuildContext context) {
return ListView(
physics: const AlwaysScrollableScrollPhysics(),
children: <Widget>[
//other widgets such as a title for the list
),
FutureBuilder(
future: allTasks,
builder: (context, snapshot){
if(snapshot.hasError){
return Text("Data has error.");
} else if (!snapshot.hasData){
return Center(
child: CircularProgressIndicator(),
);
} else {
return pendingList(Task.filterByDone(false, Task.filterByDate(Datetime.now, snapshot.data))); //filters the data to match current day
}
},
),
//other widgets
],
);
}

挂起列表

Widget pendingList(List<Task> tasks){
//some code to return a Text widget if "tasks" is empty
return ListView.separated(
separatorBuilder: (context, index){
return Divider(height: 2.0);
},
itemCount: tasks.length,
physics: const NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemBuilder: (context, index){
return Dismissible(
//dismissible backgrounds, other non-required parameters
key: Key(UniqueKey().toString()),
onDismissed: (direction) async {
Task toRemove = tasks[index]; //save the dismissed task for the upcoming operations
int removeIndex = tasks.indexWhere((task) => task.id == toRemove.id);
tasks.removeAt(removeIndex); //remove the dismissed task
if(direction == DismissDirection.endToStart) {
rateTask(toRemove).then((value) => update()); //rateTask is a function that updates the task, it is removed from the list
}
if(direction == DismissDirection.startToEnd) {
dbProvider.update(/*code to update selected task*/).then((value) => update());
}
},
child: ListTile(
//ListTile details
),
);
},
);
}

问题是(可能是错误的解释——我还是个新手(：

删除一个小部件实质上将它从列表中删除。用户解除任务后，该任务将从列表中"可视地"删除，并调用update()方法，该方法调用setState()。调用setState()会导致FutureBuilder再次构建，但在FutureBuilders再次构建时，dbProvider.getAllTasks()调用尚未完成。因此，FutureBuilder传递旧的快照，这将导致ListView使用刚刚被驳回的Task重新构建。这导致被解雇的ListTile在被解雇后立即出现，这看起来令人毛骨悚然，而且是错误的。

我不知道怎么解决这个问题。如有任何帮助，我们将不胜感激。

Answer 1

我遇到了完全相同的问题，我使用的是与Futures一起工作的sqflite，所以我最终使用了FutureBuilder和Dismissible作为我的ListView。被驳回的列表项将被删除，然后重新出现一帧，然后再次消失。我遇到了一个问题：

https://groups.google.com/forum/#！主题/flutter dev/pC48MMVKJGc

它建议从快照数据本身中删除列表项：

return FutureBuilder<List<FolderModel>>(
future: Provider.of<FoldersProvider>(context).getFolders(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, i) {
final folder = snapshot.data[i];
return Dismissible(
onDismissed: (direction) {
snapshot.data.removeAt(i); // to avoid weird future builder issue with dismissible
Provider.of<FoldersProvider>(context, listen: false).deleteFolder(folder.id);
},
background: Card(
margin: EdgeInsets.symmetric(vertical: 8),
elevation: 1,
child: Container(
alignment: AlignmentDirectional.centerStart,
color: Theme.of(context).accentColor,
child: Padding(
padding: EdgeInsets.fromLTRB(15.0, 0.0, 0.0, 0.0),
child: Icon(
Icons.delete,
color: Colors.white,
),
),
),
),
key: UniqueKey(),
direction: DismissDirection.startToEnd,
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
elevation: 1,
child: ListTile(
title: Text(folder.folderName),
leading: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.folder,
color: Theme.of(context).accentColor,
),
],
),
subtitle: folder.numberOfLists != 1
? Text('${folder.numberOfLists} items')
: Text('${folder.numberOfLists} item'),
onTap: () {},                  
),
),
);
},
);
},
);

瞧，它起作用了！对代码的最小更改：(

Answer 2

通过不使用FutureBuilder并在查询完成后调用setState找到了解决方法。

该状态现在包含一个声明为null的List<Task>，而不是Future<List<Task>>。

class TaskListState extends State<TaskList> {
DBProvider dbProvider = new DBProvider();
DateTime now = DateTime.now();
List<Task> todayTasks;
//build
}

update()功能更改如下

void update() async {
Future<List<Task>> futureTasks = dbProvider.getByDate(now); //first make the query
futureTasks.then((data){
List<Task> tasks = new List<Task>();
for(int i = 0; i < data.length; i++) {
print(data[i].name);
tasks.add(data[i]);
}
setState(() {
todayTasks = tasks; //then setState and rebuild the widget
});
});
}

这样我的小部件就不会在未来完成之前重建，这就是我遇到的问题。

我完全删除了FutureBuilder，Listview.builder只是根据状态中存储的List进行构建。

@override
Widget build(BuildContext context) {
if(todayTasks == null) {
update();
return Center(
child: CircularProgressIndicator(),
);
} //make a query if the list has not yet been initialized
return ListView(
physics: const AlwaysScrollableScrollPhysics(),
children: <Widget>[
//other widgets
pendingList(Task.filterByDone(false, todayTasks)),
],
);
}

这种方法完全解决了我的问题，我认为它比使用FutureBuilder更好，以防在再次构建小部件之前必须完成Future。