flutter_riverpod 如何監聽列表

Question

我想使用 flutter_riverpod 來觀看數據列表。 但是當我更改列表中的數據內容時，小部件不會刷新。

flutter_riverpod: ^1.0.0-dev.7

部分代碼如下：

final personProvider = ChangeNotifierProvider((ref) => PersonProvider());

class PersonProvider extends ChangeNotifier {
  List<Person> personList;

  PersonProvider() {
    personList = [
      Person(name: "jack", age: 20),
      Person(name: "rose", age: 18),
    ];
  }
  
  void changeData() {
    // change person
    //personList[0].name = "new jack";
    // add person
    personList.add(Person(name: "lili", age: 25));
    notifyListeners();
  }
}

頁面的構建方法如下：

@override
  Widget build(BuildContext context) {
    // watch List
    List<Person> list = ref.watch(personProvider.select((value) => value.personList));
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.change_circle),
          onPressed: () {
            // modify the data of list 
            ref.read(personProvider).changeData();
          },
        ),
        appBar: AppBar(),
        body: Column(
          children: list
              .map((person) => ListTile(
                    title: Text(person.name),
                    subtitle: Text("${person.age}"),
                  ))
              .toList(),
        ));
  }

代碼鏈接

如何使用flutter_riverpod查看列表中的數據變化，謝謝！！！

Answer 1

稍微改變一下你的代碼； 在使用 Riverpod 時，我將在一周中的任何一天使用StateNotifier不是ChangeNotifier 。 在我看來，它允許更結構化的邏輯。 你的代碼看起來像這樣。

class PersonNotifier extends StateNotifier<List<Person>> {
  PersonNotifier()
      : super([
          Person(name: "jack", age: 20),
          Person(name: "rose", age: 18),
        ]);

  void changeData(Person person) {
    state = [...state, person];
  }
}

final StateNotifierProvider<PersonNotifier, List<Person>> personProvider =
    StateNotifierProvider((ref) => PersonNotifier());

然后你可以像這樣在你的代碼中監聽你的狀態。

List<Person> list = ref.watch(personProvider);