flutter - List.add 和手动将项目添加到 Riverpod StateNotifier> 之间的区别

Question

我想学习如何使用 Riverpod ，因此为此，我正在实现一个小应用程序，该应用程序显示一个项目列表和一个按钮，该按钮在点击时将一个虚拟项目添加到列表中。

问题背景

在以下应用中按下按钮会按预期工作(添加了一个虚拟项，更改会立即反射(reflect)在 UI 中):

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';



void main() => runApp(const ProviderScope(child: MyApp()));

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(home: HomePage());
}



final itemsProvider = StateNotifierProvider((ref) => ItemsList());

class ItemsList extends StateNotifier<List<String>> {
  ItemsList([List<String> items]) : super(items ?? []);

  void add(String item) => state = [...state, item];
}



class HomePage extends ConsumerWidget {
  const HomePage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final items = watch(itemsProvider.state);
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: items.map((e) => Text(e)).toList(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read(itemsProvider).add('Other item'),
        tooltip: 'Add item',
        child: Icon(Icons.add),
      ),
    );
  }
}

问题

在 ItemsList 类的 add 方法中，我认为将语句 state = [...state, item] 更改为state.add(item) 不会有任何区别。但是，这样做会使应用程序不再响应状态更改:点击按钮不会触发 UI 更改，并且在我热重新加载我的应用程序之前，我在 UI 中看不到任何新项目。

所以要明确一点:将 void add(String item) => state = [...state, item]; 更改为 void add(String item) => state。 add(item); 打破应用程序状态和 UI 之间的链接。

为什么手动添加列表解构项与使用 List.add 不同？非常感谢您。

Answer 1

状态必须以 oldValue == newValue 为假的方式改变。默认情况下，使用 .add 向列表添加元素会在适当位置改变列表，因此保留相等性。这就是为什么所有示例都有类似 state = [...state, foo] 的原因，这样一个全新的列表就处于状态，并且它不等于旧列表。