"使用 Flutter Provider 包 Selector 小部件重建不必要的小部件"

Question

When I update a ChangeNotifier class instance variable using Provider.of<T>(context, listen: true).value all Selector widgets dependent on that class are rebuilt (as if I used a Consumer rather than a Selector widget). If I update an instance variable using Provider.of<T>(context, listen: false).value the Selector widget and associated selector: parameter correctly update only the widgets dependent upon the changed data

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

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

class ModState with ChangeNotifier {
  int _counter0 = 0;
  int get counter0 => _counter0;
  set counter0(int _value) {
    _counter0 = _value;
    notifyListeners();
  }

  int _counter1 = 0;
  int get counter1 => _counter1;
  set counter1(int _value) {
    _counter1 = _value;
    notifyListeners();
  }

    int get counter012 => (_counter0 + _counter1);

  static ModState of(BuildContext context, {bool listen = true}) =>
      Provider.of<ModState>(context, listen: listen);
}

class AppMain extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [ChangeNotifierProvider(builder: (_) => ModState())],
        child: MaterialApp(home: Scaffold(
            // Wrap in Builder Widget to clarify context
            body: Builder(builder: (context) {
          return SafeArea(
              child: Column(children: <Widget>[
            Row(
              children: <Widget>[
                Tooltip(
                  message: 'Update counter 0, rebuild counter 0 Text widget',
                  child: RaisedButton(
                    onPressed: () {
                      // Counterintuitively, user Provider.of<mode>(context, listen: false) to avoid rebuilding all children
                      ModState.of(context, listen: false).counter0++;
                      debugPrint(
                          'Counter0: button pressed ${ModState.of(context, listen: false).counter0}');
                    },
                    child: Text('Update 0, rebuild 0'),
                  ),
                ),
                Selector<ModState, int>(
                  selector: (_, _state) => _state.counter0,
                  builder: (_, _data, __) {
                    debugPrint(
                        'Counter0, builder invoked ${ModState.of(context, listen: false).counter0}');
                    return Text(
                        '$_data / ${ModState.of(context, listen: false).counter012}');
                  },
                )
              ],
            ),
            Row(
              children: <Widget>[
                Tooltip(
                  message: 'Update counter 1, rebuild counter 1 Text widget',
                  child: RaisedButton(
                    onPressed: () {
                      // Counterintuitively, user Provider.of<mode>(context, listen: false) to avoid rebuilding all children
                      ModState.of(context, listen: false).counter1++;
                      debugPrint(
                          'Counter1: button pressed ${ModState.of(context, listen: false).counter1}');
                    },
                    child: Text('Update 1, rebuild 1'),
                  ),
                ),
                Selector<ModState, int>(
                  selector: (_, _state) => _state.counter1,
                  builder: (_, _data, __) {
                    debugPrint(
                        'Counter1, builder invoked ${ModState.of(context, listen: false).counter1}');
                    return Text(
                        '$_data / ${ModState.of(context, listen: false).counter012}');
                  },
                )
              ],
            ),
          ]));
        }))));
  }
}

While my now code works, using the listen: false parameter is counter-intuitive in terms of my understanding of that parameter. I would like to understand why, so that I can improve my code in general

Answer 1

From what has been mentioned on this post, Selector is working as expected. As mentioned in the docs , the Widget will rebuild when there's a change on selector(BuildContext, A) . What seems to happen here is the entire Widget build() gets rebuilt. Then again, if the data displayed on the Widgets are correct and there's no performance issues, then it's passable. However, if you'd like to prevent rebuilds, you may want to reconsider how Provider is laid out on the page.