了解 listen: false 与 Provider<SomeType>.of(context, listen: false) 一起使用时的工作原理

Question

我正在努力了解 Provider 包如何与 Flutter 一起工作，但对 listen:false 的工作方式感到困惑。

我使用新 Flutter 项目中常用的 Counter 示例编写了一些基本代码。我使用 Provider 创建了三种类型的无状态小部件：

Provider.of（上下文）
消费者
Provider.of（上下文，听：假）

第三个示例展示了如何在不重建的情况下访问提供者对象并调用其上的方法。

当我运行应用程序时，所有小部件计数都在变化 - 我只希望它在前两个中发生变化。

这是一个简单的例子 - 我做错了什么？

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

void main() => runApp(MyApp());

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(builder: (_) => Counter()),
      ],
      child: MaterialApp(
        title: 'Provider Demo',
        theme: ThemeData(
          primarySwatch: Colors.amber,
        ),
        home: MyHomePage(title: 'Provider Demo Home Page'),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    Counter counter = Provider.of<Counter>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ExampleProviderWidget(),
            ExampleConsumerWidget(),
            ExampleNoListenWidget()
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class ExampleProviderWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Counter counter = Provider.of<Counter>(context);

    return Container(
      color: Colors.green,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Provider.of<Counter>(context):',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
    );
  }
}

class ExampleConsumerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<Counter>(
      builder: (context, counter, _) {
        return Container(
          color: Colors.blue,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Consumer<Counter>(context):',
                ),
                Text(
                  '${counter.count}',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class ExampleNoListenWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Counter counter = Provider.of<Counter>(context, listen: false);

    return Container(
      color: Colors.red,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Provider.of<Counter>(context, listen: false):',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.display1,
            ),
            RaisedButton(
              child: Text("Increment"),
              onPressed: () => counter.increment(),
            )
          ],
        ),
      ),
    );
  }
}

Answer 1

这是因为，虽然使用 listen:false 调用 Provider.of 的小部件不想重建，但其父级强制它重建。

在您的示例中，当 Counter 更改时，MyHomePage 重建并重新创建指定 listen:false 的小部件，这反过来又强制它重建。

MyHomePage 也应该在这里指定 listen: false。

Answer 2

Remi 建议的是一种可行的方法（hack）。但我相信在这种情况下更好的方法是删除电话 counter counter = Provider.of(上下文);来自 MyHomePageClass。该调用污染了您的 Counter 对象的范围。正如 flutter.io、It is best practice to put your Consumer widgets as deep in the tree as possible 所建议的那样。正如您在 ExampleProviderWidget()、ExampleConsumerWidget()、ExampleNoListenWidget() 中所做的那样。因此，让 floatingActionButton 成为一个单独的小部件 class 并拥有自己的 Provider.of(context)。而您的 MyHomePageClass 将不必调用 Provider.of。

Answer 3

对我有用

I/flutter (12384): MyApp build
I/flutter (12384): MyHomePage build
I/flutter (12384): ExampleProviderWidget build
I/flutter (12384): ExampleConsumerWidget build
I/flutter (12384): ExampleNoListenWidget build
Reloaded 1 of 524 libraries in 792ms.
I/flutter (12384): ExampleProviderWidget build
I/flutter (12384): ExampleProviderWidget build
I/flutter (12384): ExampleProviderWidget build
I/flutter (12384): ExampleProviderWidget build


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

void main() => runApp(MyApp());

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    print('MyApp build');
    return MaterialApp(
      title: 'Provider Demo',
      theme: ThemeData(
        primarySwatch: Colors.amber,
      ),
      home: MyHomePage(title: 'Provider Demo Home Page'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;
  Counter _counter = Counter();
  @override
  Widget build(BuildContext context) {
    print('MyHomePage build');
    return ChangeNotifierProvider.value(
      value: _counter,
      child: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ExampleProviderWidget(),
              ExampleConsumerWidget(),
              ExampleNoListenWidget()
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => _counter.increment(),
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

class ExampleProviderWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('ExampleProviderWidget build');
    Counter counter = Provider.of<Counter>(context);

    return Container(
      color: Colors.green,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Provider.of<Counter>(context):',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
    );
  }
}

class ExampleConsumerWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('ExampleConsumerWidget build');
    return Consumer<Counter>(
      builder: (context, counter, _) {
        return Container(
          color: Colors.blue,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'Consumer<Counter>(context):',
                ),
                Text(
                  '${counter.count}',
                  style: Theme.of(context).textTheme.display1,
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

class ExampleNoListenWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('ExampleNoListenWidget build');
    Counter counter = Provider.of<Counter>(context, listen: false);

    return Container(
      color: Colors.red,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Provider.of<Counter>(context, listen: false):',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.display1,
            ),
            RaisedButton(
              child: Text("Increment"),
              onPressed: () => counter.increment(),
            )
          ],
        ),
      ),
    );
  }
}

Answer 4

从您编写的代码来看，您在 onPressed 方法中使用的 increment 方法将不起作用，如果您实现 听：假.

Answer 5

listen: false 必须能够在 [State.initState] 或提供商的创建方法中调用 Provider.of。

listen: true，后面的值更改将触发新的 [State.build] 到小部件，[State.didChangeDependencies] 用于 [StatefulWidget]。

Answer 6

根据下面的link

https://docs.flutter.dev/development/data-and-backend/state-mgmt/simple#providerof

当 listen 设置为 false 时，调用 notifyListeners 时不会导致此小部件重建。

了解 listen: false 与 Provider<SomeType>.of(context, listen: false) 一起使用时的工作原理

Understand how listen: false works when used with Provider<SomeType>.of(context, listen: false)

provider

flutter