如何使用ChangeNotifier重建列表中仅有修改过的项目？

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']),
  ...
)