一尘不染

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

flutter

我有一个StatefulWidget在颤振按钮,导航我到另一个StatefulWidget使用Navigator.push()。在第二个小部件上,我正在更改全局状态(一些用户首选项)。当我从第二个小部件返回到第一个小部件时,使用Navigator.pop()第一个小部件处于旧状态,但是我想强制重新加载它。任何想法如何做到这一点?我有一个主意,但看起来很丑:

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

阅读 307

收藏
2020-08-13

共1个答案

一尘不染

您可以在这里做几件事。@Mahi的答案虽然正确,但可能更简洁一些,实际上是在OP询问时使用push而不是showDialog。这是一个使用示例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(),
      ),
    );

如果您使用继承的窗口小部件,则不必担心观看所推送页面的弹出状态,该弹出窗口适用于基本用例,但在更复杂的情况下最终可能会遇到问题。

2020-08-13