我在Flutter中有一个带有按钮的StatefulWidget,它使用Navigator.push()将我导航到另一个StatefulWidget。在第二个小部件上,我正在更改全局状态(一些用户首选项)。当我从第二个小部件回到第一个时,使用Navigator.pop(),第一个小部件处于旧状态,但我想强制它重新加载。知道怎么做吗?我有一个想法,但看起来很难看:

弹出以删除第二个小部件(当前小部件) 再次弹出以删除第一个小部件(前一个) 推送第一个小部件(它应该强制重绘)


当前回答

这里有几件事你可以做。@Mahi的回答虽然正确,但可以更简洁一点,实际上使用push而不是showDialog,因为OP正在询问。这是一个使用Navigator.push的例子:

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Column(
        children: <Widget>[
          RaisedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('back'),
          ),
        ],
      ),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new FirstPageState();
}

class FirstPageState extends State<FirstPage> {

  Color color = Colors.white;

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: color,
      child: Column(
        children: <Widget>[
          RaisedButton(
            child: Text("next"),
            onPressed: () async {
              final value = await Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SecondPage()),
                ),
              );
              setState(() {
                color = color == Colors.white ? Colors.grey : Colors.white;
              });
            },
          ),
        ],
      ),
    );
  }
}

void main() => runApp(
      MaterialApp(
        builder: (context, child) => SafeArea(child: child),
        home: FirstPage(),
      ),
    );

但是,还有另一种方法可以很好地满足您的用例。如果使用全局参数来影响第一个页面的构建,那么可以使用InheritedWidget来定义全局用户首选项,每次更改时,FirstPage都会重新构建。这甚至可以在无状态小部件中工作,如下所示(但也应该可以在有状态小部件中工作)。

在flutter中inheritedWidget的一个例子是应用程序的Theme,尽管他们在小部件中定义了它,而不是像我这里这样直接构建它。

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

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Column(
        children: <Widget>[
          RaisedButton(
            onPressed: () {
              ColorDefinition.of(context).toggleColor();
              Navigator.pop(context);
            },
            child: new Text("back"),
          ),
        ],
      ),
    );
  }
}

class ColorDefinition extends InheritedWidget {
  ColorDefinition({
    Key key,
    @required Widget child,
  }): super(key: key, child: child);

  Color color = Colors.white;

  static ColorDefinition of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(ColorDefinition);
  }

  void toggleColor() {
    color = color == Colors.white ? Colors.grey : Colors.white;
    print("color set to $color");
  }

  @override
  bool updateShouldNotify(ColorDefinition oldWidget) =>
      color != oldWidget.color;
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var color = ColorDefinition.of(context).color;

    return new Container(
      color: color,
      child: new Column(
        children: <Widget>[
          new RaisedButton(
              child: new Text("next"),
              onPressed: () {
                Navigator.push(
                  context,
                  new MaterialPageRoute(builder: (context) => new SecondPage()),
                );
              }),
        ],
      ),
    );
  }
}

void main() => runApp(
      new MaterialApp(
        builder: (context, child) => new SafeArea(
              child: new ColorDefinition(child: child),
            ),
        home: new FirstPage(),
      ),
    );

如果您使用继承的小部件,则不必担心查看所推送的页面是否弹出,这适用于基本用例,但在更复杂的场景中可能最终会出现问题。

其他回答

onTapFunction(BuildContext context) async {
    final reLoadPage = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => IdDetailsScreen()),
    );

    if (reLoadPage) {
        setState(() {});
    }
}

现在在做Navigator的时候。从第二页弹出到第一页只是返回一些值,在我的情况下是bool类型

onTap: () {
    Navigator.pop(context, true);
}

这工作真的很好,我从一个医生那里得到的在颤振页面,颤振医生

我定义了从第一个页面控制导航的方法。

_navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => AddDirectionPage()),
    );

    //below you can get your result and update the view with setState
    //changing the value if you want, i just wanted know if i have to  
    //update, and if is true, reload state

    if (result) {
      setState(() {});
    }
  }

所以,我调用它在一个动作方法从一个墨水瓶,但也可以调用从一个按钮:

onTap: () {
   _navigateAndDisplaySelection(context);
},

最后在第二页,返回一些东西(我返回了一个bool,你可以返回任何你想要的):

onTap: () {
  Navigator.pop(context, true);
}

我的解决方案是在SecondPage上添加一个函数参数,然后接收从FirstPage执行的重新加载函数,然后在Navigator.pop(context)行之前执行该函数。

珍宝

refresh() {
setState(() {
//all the reload processes
});
}

然后翻到下一页……

Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondPage(refresh)),);

SecondPage

final Function refresh;
SecondPage(this.refresh); //constructor

然后在导航器弹出行之前,

widget.refresh(); // just refresh() if its statelesswidget
Navigator.pop(context);

所有需要从前一页重新加载的内容都应该在弹出窗口后更新。

您可以在弹出上下文时传递回一个动态结果,然后在值为true时调用setState((){}),否则就保持状态不变。

我粘贴了一些代码片段供您参考。

handleClear() async {
    try {
      var delete = await deleteLoanWarning(
        context,
        'Clear Notifications?',
        'Are you sure you want to clear notifications. This action cannot be undone',
      );
      if (delete.toString() == 'true') {
        //call setState here to rebuild your state.

      }
    } catch (error) {
      print('error clearing notifications' + error.toString());
             }
  }



Future<bool> deleteLoanWarning(BuildContext context, String title, String msg) async {

  return await showDialog<bool>(
        context: context,
        child: new AlertDialog(
          title: new Text(
            title,
            style: new TextStyle(fontWeight: fontWeight, color: CustomColors.continueButton),
            textAlign: TextAlign.center,
          ),
          content: new Text(
            msg,
            textAlign: TextAlign.justify,
          ),
          actions: <Widget>[
            new Container(
              decoration: boxDecoration(),
              child: new MaterialButton(
                child: new Text('NO',),
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
              ),
            ),
            new Container(
              decoration: boxDecoration(),
              child: new MaterialButton(
                child: new Text('YES', ),
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
              ),
            ),
          ],
        ),
      ) ??
      false;
}

问候, Mahi

这段简单的代码会转到根目录,即使没有setState也会重新加载状态:

Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (context) => MainPage()),  (Route<dynamic> route) => false,);   //// this MainPage is your page to refresh