MultiProvider 中的消费者和 context.watch

Question

第一次尝试Flutter，有点迷茫 MultiProvider class.

问题很简单，但是没找到解释：

when should one use Consumer and when context.watch?

例如，以我找到的示例应用程序之一为例，我尝试为两个全局状态、主题和应用程序状态使用两个提供程序：

runApp(
  MultiProvider(providers: [
    ChangeNotifierProvider(create: (context) => AppTheme()),
    ChangeNotifierProvider(create: (context) => AppStatus()),
  ],
  child: const MyApp()
  ));

然后应用程序小部件通过 Consumer:

访问主题

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

  @override
  Widget build(BuildContext context) {
    return Consumer<AppTheme>(
      builder: (context, appTheme, child) {
        // ...

据我了解，现在所有子部件都将继承提供程序。对吗？

我的主页，那么，MyAppclass调用的不是使用Consumer，而是context.watch：

@override
Widget build(BuildContext context) {
  final appTheme = context.watch<AppTheme>();
  final appStatus = context.watch<AppStatus>();
  return NavigationView( 
    // ...

它有效，请不要误会我的意思，但我只是复制了 appStatus 上面的行，所以我并不完全理解它。这也是由于我设计了另一个屏幕来访问 AppStatus 全局状态，但我使用 Consumer、as suggested by the Flutter documentation:

class _ViewerState extends State<Viewer> {

  @override
  Widget build(BuildContext context) {
    return Consumer<AppStatus>(
      builder: (context, appStatus, child) {
        return ScaffoldPage.scrollable(
          header: const PageHeader(title: Text('Test')),
          children: [
            FilledButton(child: Text("Try ${appStatus.count}"), onPressed: (){ appStatus.increment(); debugPrint('pressed ${appStatus.count}'); }),
            FilledButton(child: Text("Reset"), onPressed: (){ appStatus.reset(); }),
          ]);
      },
    );
  }
}

我觉得我在这里滥用了一些东西，我真的不明白幕后发生了什么......

Answer 1

context.watch<T>() 和 Consumer<T> 做同样的事情。大多数时候 context.watch<T>() 只是更方便。在某些 context 不可用的情况下，Consumer<T> 很有用。

MultiProvider 中的消费者和 context.watch

Consumer and context.watch in MultiProvider

flutter

dart

flutter-provider