弹出时强制颤动导航器重新加载状态

Question

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

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

Answer 1

对我来说，这似乎有效：

Navigator.of(context).pushNamed("/myRoute").then((value) => setState(() {}));

然后简单地调用Navigator.pop()孩子。

Answer 2

你可以在这里做几件事.@ Mahi的回答虽然正确可能会更简洁,实际上使用push而不是showDialog,正如OP所询问的那样.这是一个使用的示例Navigator.push:

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.green,
      child: new Column(
        children: <Widget>[
          new RaisedButton(
            onPressed: () => Navigator.pop(context),
            child: new 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: new Column(
        children: <Widget>[
          new RaisedButton(
              child: new Text("next"),
              onPressed: () {
                Navigator
                    .push(
                  context,
                  new MaterialPageRoute(builder: (context) => new SecondPage()),
                )
                    .then((value) {
                  setState(() {
                    color = color == Colors.white ? Colors.grey : Colors.white;
                  });
                });
              }),
        ],
      ),
    );
  }
}

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

但是,还有另一种方法可以很好地适应您的用例.如果您使用的global是影响第一页构建的内容,则可以使用InheritedWidget定义全局用户首选项,每次更改时,您的FirstPage都将重建.这甚至可以在无状态小部件中工作,如下所示(但也应该在有状态小部件中工作).

flutter中的inheritedWidget的一个例子是应用程序的主题,虽然它们在一个小部件中定义它,而不是像我这里那样直接构建它.

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

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Container(
      color: Colors.green,
      child: new Column(
        children: <Widget>[
          new 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(),
      ),
    );

如果您使用继承的小部件,则不必担心要查看您推送的页面的弹出窗口,这将适用于基本用例,但最终可能会在更复杂的情况下出现问题.

Answer 3

该简易窍门是使用Navigator.pushReplacement方法

第 1 页

Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => Page2(),
  ),
);

第2页

Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => Page1(),
  ),
);

Answer 4

您可以使用 pushReplacement 并指定新的 Route

Answer 5

只需.then((value) { setState(() {});在 page1() 上的 Navigator.push 之后添加，如下所示：

Navigator.push(context,MaterialPageRoute(builder: (context) => Page2())).then((value) { setState(() {});

现在，当您Navigator.pop(context)从 page2使用时，您的 page1 会自行重建

Answer 6

有两件事，从

• 第一页到第二页

  在第一页中使用

  // sending "Foo" from 1st
  Navigator.push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));
  

  在第二页中使用它。

  class Page2 extends StatelessWidget {
    final String string;
  
    Page2(this.string); // receiving "Foo" in 2nd
  
    ...
  }
  

• 第二页到第一页

  在第二页中使用此

  // sending "Bar" from 2nd
  Navigator.pop(context, "Bar");
  

  在第一页中使用它，它与以前使用的相同，但几乎没有修改。

  // receiving "Bar" in 1st
  String received = await Navigator.push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));
  

Answer 7

这项工作非常好，我从颤振页面的这个文档中得到：颤振文档

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

_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);
},

最后在第二页，返回一些东西（我返回了一个布尔值，你可以返回任何你想要的）：

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

Answer 8

我有类似的问题。

请尝试一下：

在第一页中：

Navigator.push( context, MaterialPageRoute( builder: (context) => SecondPage()), ).then((value) => setState(() {}));

从 SecondPage() 弹回到 FirstPage() 后，“then”语句将运行并刷新页面。

Answer 9

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

第一页

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

然后推到下一页...

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

第二页

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

然后在导航器弹出线之前，

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

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

Answer 10

把它放在你要推送到第二个屏幕的地方（在异步函数内）

Function f;
f= await Navigator.pushNamed(context, 'ScreenName');
f();

把这个放在你弹出的地方

Navigator.pop(context, () {
 setState(() {});
});

在setState被称为内部pop封闭更新数据。

Answer 11

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

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

现在Navigator.pop从第二页返回第一页时只返回一些值，在我的情况下，如果bool输入

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