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中使用唯一键。

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

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

1 个答案: