Flutter：Android：如何从另一个文件调用 setState()？

Question

为了应用应用程序的设置配置在应用程序周围生效，我需要从appSettings文件触发main的setState，如何做到这一点？

文件代码：

对于 main.dart

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Builder(
        builder: (context) => Scaffold(
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(isVibrationEnabled
                    ? "Vibration is enabled"
                    : "Vibration is disabled"),
                MaterialButton(
                  color: Colors.grey,
                  child: Text("Open app setting"),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => AppSettings(),
                      ),
                    );
                  },
                )
              ],
            ),
          ),
        ),
      ),
    );

对于 globalVariables.dart

bool isVibrationEnabled = false;

appSettings.dart

class _AppSettingsState extends State<AppSettings> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: FlatButton(
            color: Colors.grey,
            child: Text(
                isVibrationEnabled ? "Disable Vibration" : "Enable Vibration"),
            onPressed: () {
              setState(() {
                isVibrationEnabled
                    ? isVibrationEnabled = false
                    : isVibrationEnabled = true;
              });
              //What to do here to trigger setState() in main.dart flie
              //for displaying "Vibration is enabled" or "Vibration is disabled"
              //acording to the value of bool variable which is in globalVariable.dart file.
            },
          ),
        ),
      ),
    );

我在stackoverflow上看到过其他答案，但没有一个很容易理解，如果有人可以简单地回答，请

Answer 1

对于您的特定用例，我认为最好是使用状态管理解决方案，例如 Provider、BLoC 或 GetX。 文档在这里： https://flutter.dev/docs/development/data-and-backend/state-mgmt/options

如果您想要快速简单的操作，您可以将您正在侦听的值和包含 setState 的函数传递到新页面。 通常，您会使用子窗口小部件而不是新页面来执行此操作，因此它可能会变得有点复杂 - 您需要在 setState 之后重建整个页面。 我能想到的最简单的方法是使用 Navigator.pushReplacement。

一些代码（我在 stackoverflow 中编写的而不是我的 IDE，所以可能有错误）：

class AppSettings extends StatefulWidget {
    final Function callback;
    final bool isVibrationEnabled;

    AppSettings({
        @required this.callback,
        @required this.isVibrationEnabled,
    });
}

...

在您的 AppSettingsState 中使用：

        FlatButton(
            color: Colors.grey,
            child: Text(
                widget.isVibrationEnabled ? "Disable Vibration" : "Enable Vibration"),
            onPressed: () => widget.callback(),
          ),

在主文件中，创建应用程序设置时使用以下内容：

           MaterialButton(
              color: Colors.grey,
              child: Text("Open app setting"),
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => AppSettings(
                        isVibrationEnabled: isVibrationEnabled,
                        callback: callback,
                     ),
                  ),
                );
              },
            )

            void Function callback() {
               setState(() => isVibrationEnabled = !isVibrationEnabled);
                Navigator.pushReplacement(
                  context,
                  MaterialPageRoute(
                    builder: (context) => AppSettings(
                        isVibrationEnabled: isVibrationEnabled,
                        callback: callback,
                     ),
                  ),
                );
              }

同样，您可能应该针对此特定用例使用状态管理解决方案。 从另一个页面重建一个页面看起来很混乱。 但它应该有效。 是的，您正在回调中使用回调。 因此，您可能需要将回调放在文件顶部附近或主函数之外才能使其正常工作。

Answer 2

您的首选解决方案是使用状态管理包。

但是，对于这个特定问题和用例，您可以使用以下代码：

class _AppSettingsState extends State<AppSettings> {
@override
Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    body: Center(
      child: FlatButton(
        color: Colors.grey,
        child: Text(
            isVibrationEnabled ? "Disable Vibration" : "Enable Vibration"),
        onPressed: () {
          setState(() {
            isVibrationEnabled
                ? isVibrationEnabled = false
                : isVibrationEnabled = true;
          });
        // add this:
        context.visitAncestorElements((e) {
            e.markNeedsBuild();
            return true;
          });
        },
      ),
    ),
  ),
);