我想学习如何使用Riverpod https://riverpod.dev/,因此为此我正在实现一个小应用程序,该应用程序显示项目列表和一个按钮,该按钮在点击时将虚拟项目添加到列表中。
问题背景
按下以下应用程序中的按钮将按预期工作(添加一个虚拟项目,并且更改会立即反映在 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),
),
);
}
}
Problem
在 - 的里面add
的方法ItemsList
类,我认为改变声明state = [...state, item]
to state.add(item)
不会有任何区别。但是,这样做会使应用程序不再响应状态更改:点击按钮不会触发 UI 的更改,并且在热重新加载应用程序之前,我在 UI 中看不到任何新项目。
所以要明确一点:改变void add(String item) => state = [...state, item];
to void add(String item) => state.add(item);
打破应用程序状态和 UI 之间的链接。
为什么通过列表解构手动添加项目与使用不同List.add
?预先非常感谢您。