Flutter/Riverpod：UI 未根据 StateNotifierProvider 内的状态更改进行更新

Question

当我知道状态正在发生变化时，我的应用程序的用户界面不会更新。我正在使用watchRiverpod 的方法来处理此问题，但除非我进行热重载，否则更改不会生效。

我有一个类，HabitListStateNotifier其中包含从列表中添加/删除习惯的方法：

class HabitListStateNotifier extends StateNotifier<List<Habit>> {
  HabitListStateNotifier(state) : super(state ?? []);

  void startAddNewHabit(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (_) {
          return NewHabit();
        });
  }

  void addNewHabit(String title) {
    final newHabit = Habit(title: title);
    state.add(newHabit);
  }

  void deleteHabit(String id) {
    state.removeWhere((habit) => habit.id == id);
  }
}

这是这个的提供者：

final habitsProvider = StateNotifierProvider(
  (ref) => HabitListStateNotifier(
    [
      Habit(title: 'Example Habit'),
    ],
  ),
);

HabitList以下是（UI 未更新的部分）的实现方式：

class HabitList extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final habitList = watch(habitsProvider.state);

    /////////////not updating/////////////
    return ListView.builder(
      shrinkWrap: true,
      scrollDirection: Axis.vertical,
      itemBuilder: (context, index) {
        return HabitCard(
          habit: habitList[index],
        );
      },
      itemCount: habitList.length,
    );
    /////////////not updating/////////////
  }
}

最后，HabitCard（由什么HabitList组成）：

class HabitCard extends StatelessWidget {
  final Habit habit;

  HabitCard({@required this.habit});

  @override
  Widget build(BuildContext context) {

    /////////////function in question/////////////
    void deleteHabit() {
      context.read(habitsProvider).deleteHabit(habit.id);
    }
    /////////////function in question/////////////

    return Card(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(devHeight * 0.03),
      ),
      color: Colors.grey[350],
      elevation: 3,
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              HabitTitle(
                title: habit.title,
              ),
              Consumer(
                builder: (context, watch, child) => IconButton(
                  padding: EdgeInsets.all(8),
                  icon: Icon(Icons.delete),

                  /////////////function in question/////////////
                  onPressed: deleteHabit,
                  /////////////function in question/////////////
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

当我按下 a 中的删除图标时HabitCard，我知道Habit正在从列表中删除，但更改并未反映在 UI 中。但是，当我进行热重载时，它会按预期消失。我在这里做错了什么？

Answer 1

由于StateNotifierProvider状态是不可变的，因此您需要使用state = - 这将根据文档触发 UI 更新来替换 CRUD 操作上的数据。

然后使用分配新数据state = <newData>

添加和删​​除重写

你需要像这样写你的add& ：delete

void addNewHabit(String title) {
    state = [ ...state, Habit(title: title)];
}

void deleteHabit(String id) {
  state = state.where((Habit habit) => habit.id != id).toList();
}

您需要将旧列表与新列表交换，Riverpod 才能启动。

更新代码（供其他人使用）

虽然您的查询不需要更新数据，但以下示例说明了如何进行更新以保留列表的原始排序顺序；

void addNewHabit(String title) {
    state = [ ...state, Habit(title: title)];
}

void deleteHabit(String id) {
  state = state.where((Habit habit) => habit.id != id).toList();
}

Answer 2

我不知道这是否是处理事情的正确方法，但我想通了。在HabitListStateNotifier、 foraddNewHabit和 中deleteHabit，我在末尾添加了这行代码：state = state;，它完全按照我想要的方式工作。