如何使用ChangeNotificationer仅重建列表中已修改的项

Question

我正在尝试从服务器获取数据。当按下按钮时，将向列表中添加一个伪小部件，并在获取数据后显示响应。当项目被添加到列表中并加载数据时，我调用了notifyListeners()，但所有项目都被重建，即使是未更改的项目。

如何防止重新生成未更改的项目？

这是我的密码。

class Item {
bool isLoaded;
String request;
String data;
Item(this.request) : isLoaded = false;
Future loadItemData() {
// dummy for api request
return Future.delayed(Duration(seconds: 3)).whenComplete(() {
data = "item get result";
isLoaded = true;
});
}
}
class ItemList extends ChangeNotifier {
List<Item> lists = [];
void addItem(String request) {
var item = Item(request);
lists.add(item);
item.loadItemData().whenComplete(() {
notifyListeners();
});
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ChangeNotifierProvider(
create: (context) => ItemList(),
child: MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyItems(),
),
);
}
}
class MyItems extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("My Items"),
),
body: Consumer<ItemList>(
builder: (context, value, child) {
return Column(
children: <Widget>[
RaisedButton(
child: const Text("Add Item"),
onPressed: () {
value.addItem("dummy request id");
},
),
Expanded(
child: ListView.builder(
itemBuilder: (context, index) {
var item = value.lists[index];
return item.isLoaded
? ListTile(
title: Text(value.lists[index].data),
)
: ListTile(
leading: CircularProgressIndicator(),
);
},
itemCount: value.lists.length,
),
),
],
);
},
),
);
}
}

Answer 1

在ListTile中使用Unique键。

ListTile(
key: ValueKey(value.lists[index].data['id']),
...
)