Question

我目前正在阅读provider软件包的示例代码：

// ignore_for_file: public_member_api_docs
import 'package:flutter/foundation.dart';
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 {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(builder: (_) => Counter()),
      ],
      child: Consumer<Counter>(
        builder: (context, counter, _) {
          return MaterialApp(
            supportedLocales: const [Locale('en')],
            localizationsDelegates: [
              DefaultMaterialLocalizations.delegate,
              DefaultWidgetsLocalizations.delegate,
              _ExampleLocalizationsDelegate(counter.count),
            ],
            home: const MyHomePage(),
          );
        },
      ),
    );
  }
}

class ExampleLocalizations {
  static ExampleLocalizations of(BuildContext context) =>
      Localizations.of<ExampleLocalizations>(context, ExampleLocalizations);

  const ExampleLocalizations(this._count);

  final int _count;

  String get title => 'Tapped $_count times';
}

class _ExampleLocalizationsDelegate
    extends LocalizationsDelegate<ExampleLocalizations> {
  const _ExampleLocalizationsDelegate(this.count);

  final int count;

  @override
  bool isSupported(Locale locale) => locale.languageCode == 'en';

  @override
  Future<ExampleLocalizations> load(Locale locale) =>
      SynchronousFuture(ExampleLocalizations(count));

  @override
  bool shouldReload(_ExampleLocalizationsDelegate old) => old.count != count;
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Title()),
      body: const Center(child: CounterLabel()),
      floatingActionButton: const IncrementCounterButton(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: Provider.of<Counter>(context).increment,
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        const Text(
          'You have pushed the button this many times:',
        ),
        Text(
          '${counter.count}',
          style: Theme.of(context).textTheme.display1,
        ),
      ],
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Text(ExampleLocalizations.of(context).title);
  }
}

起初，我很困惑地看到以下代码。它是Widget树顶部的MultiProvider，紧随其后的是Consumer：

return MultiProvider(
  providers: [
    ChangeNotifierProvider(builder: (_)=>Counter()),
  ],
  child: Consumer<Counter>(
    builder: (context, counter, _){
      return MaterialApp(
        home: const MyHomePage()
      );
    },
  ),
);

我想知道：这真的对性能不好吗？每当使用者的状态更新时，都必须重建所有树。然后我意识到到处都有const限定词。这似乎是一个非常整洁的设置。我决定对其进行调试，并查看何时以及在何处重建窗口小部件。

首次启动应用程序时，Flutter顺着树下走，并逐个构建窗口小部件。这是有道理的。

单击按钮并增加Counter时，将在树的最上方的使用者上调用builder。之后，在build和CounterLabel上调用IncrementCounterButton。

CounterLabel很有意义。这不是const，实际上会更改其内容。但是IncrementCounterButton被标记为const。为什么要重建？

我不清楚为什么某些const小部件会被重建，而另一些却没有。背后的系统是什么？

Answer 1

重建小部件的最常见原因是：

其父级重建（无论原因为何）
Element.markNeedsBuild已被手动调用（通常使用setState）
依赖于更新的继承小部件

小部件的常量实例不受第一个原因的影响，但是它们仍然受其他两个原因的影响。

这意味着StatelessWidget的const实例将仅在其中一个继承的窗口小部件使用update时重建。

Answer 2

Provider是InheritedWidget的便捷包装，为您完成了许多不错的工作。

因为IncrementCounterButton访问Provider（和底层的InheritedWidget），所以只要数据更改，它就会侦听并重建。

为防止按钮或其他不需要在数据更改时重新构建的小部件，请将listen设置为false。

Provider.of（上下文，侦听：false）。增量

需要注意的是，如果重新构建根窗口小部件，则标记为listen: false的窗口小部件仍将重新构建。 Understand how listen: false works when used with Provider<SomeType>.of(context, listen: false)

希望这会有所帮助！

扑：什么时候重建const小部件？

2 个答案: