List.add与手动向Riverpod StateNotifier&lt；列表&lt；字符串&gt；添加项目的区别 [英] Difference between List.add and manually adding item to a Riverpod StateNotifier<List<String>>

问题描述

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

问题上下文

在以下APP中按下该按钮即可正常工作(添加了一个虚拟项，更改会立即反映在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),
      ),
    );
  }
}

问题

在add类的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有何不同？提前非常感谢您。

推荐答案

必须以oldValue == newValue为False的方式更改状态。默认情况下，使用.add向列表添加元素会使列表就地变异，因此保持相等。这就是为什么所有示例都有类似state = [...state, foo]的内容，因此一个全新的列表处于状态，而这不等于旧的列表。

这篇关于List.add与手动向Riverpod StateNotifier&lt；列表&lt；字符串&gt；添加项目的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！