flutter - 应用深色模式会触发StatefulWidget的构建方法几次

Question

我正在尝试将Dark主题应用于该应用程序，当我打开和关闭Dark主题的Switch时，可以看到build方法被调用了两次。

为什么？

这是 flutter 的正常行为吗？

这会导致性能问题吗？

注意:我在build方法中添加了一条print语句，以查明调用该build方法的次数。

我应该在代码中进行更改以更正此行为吗？

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("MyApp");
    return ChangeNotifierProvider<ThemeChanger>(
      create: (_) => ThemeChanger(ThemeData.dark()),
      child: new MaterialAppWithTheme(),
    );
  }
}

class MaterialAppWithTheme extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("MaterialAppWithTheme");
    final theme = Provider.of<ThemeChanger>(context);

    return MaterialApp(
      home: SettingScreen(),
      theme: theme.getTheme(),
    );
  }
}

class SettingScreen extends StatelessWidget {
  static final routeName = "./SettingScreen";

  @override
  Widget build(BuildContext context) {
    print("SettingScreen");
    ThemeData themeData = Theme.of(context);
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Settings",
        ),
      ),
      body: ListView(
        children: <Widget>[
          const SizedBox(
            height: 10,
          ),
          Card(
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
            child: Column(
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.all(8.0),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: themeData.primaryColor,
                  ),
                  width: double.infinity,
                  child: const Text(
                    "User Settings",
                    style: TextStyle(fontSize: 15, color: Colors.white),
                    textAlign: TextAlign.center,
                  ),
                ),
                const SizedBox(
                  height: 10,
                ),
                DarkThemeOption(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class DarkThemeOption extends StatefulWidget {
  @override
  _DarkThemeOptionState createState() => _DarkThemeOptionState();
}

class _DarkThemeOptionState extends State<DarkThemeOption> {
  var enableDarkTheme = false;
  var themeProvider;
  ThemeData themeData;

  @override
  void initState() {
    print("_DarkThemeOptionState init");
    themeProvider = Provider.of<ThemeChanger>(context, listen: false);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print("_DarkThemeOptionState");
    themeData = Theme.of(context);
    return Padding(
      padding: const EdgeInsets.only(top: 5, left: 22, bottom: 10),
      child: Row(
        children: <Widget>[
          const Text(
            "Enable Dark Theme",
            style: TextStyle(
              fontWeight: FontWeight.bold,
              color: Colors.blue,
            ),
          ),
          const Spacer(),
          Switch(
              activeColor: themeData.accentColor,
              value: enableDarkTheme,
              onChanged: (value) async {
                // final status = await authProvider.updateThemeSetting(value);
                setState(() {
                  enableDarkTheme = value;
                  if (!enableDarkTheme) {
                    themeProvider.setTheme(ThemeData.light());
                  } else {
                    themeProvider.setTheme(ThemeData.dark());
                  }
                });
              }),
        ],
      ),
    );
  }
}

class ThemeChanger with ChangeNotifier {
  ThemeData _themeData;

  ThemeChanger(this._themeData);

  getTheme() => _themeData;
  setTheme(ThemeData theme) {
    _themeData = theme;

    notifyListeners();
  }
}

从日志中，我可以看到每次打开和关闭黑暗模式开关时，都会看到设置屏幕和 _DarkThemeOptionState被调用5次以上。

I/flutter ( 1176): MaterialAppWithTheme
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): MaterialAppWithTheme
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): MaterialAppWithTheme
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState
I/flutter ( 1176): SettingScreen
I/flutter ( 1176): _DarkThemeOptionState

Light Mode

Dark Mode

Answer 1

这是正常现象，因为在更改主题，本地化等时，必须重新渲染 View ，因此再次调用编译方法