Flutter中如何返回刷新上一页？

Question

我有一个主页，单击该主页时会通过导航将我带到另一个页面，在其中执行一些操作，然后按返回按钮将我带回主页。但问题是主页没有刷新。

当我按下返回按钮并刷新主页时，有没有办法重新加载页面？

Answer 1

当您像这样伪代码

导航回第一页时，您可以触发 API 调用

class PageOne extends StatefulWidget {
  @override
  _PageOneState createState() => new _PageOneState();
}

class _PageOneState extends State<PageOne> {
  _getRequests()async{

  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new RaisedButton(onPressed: ()=>
        Navigator.of(context).push(new MaterialPageRoute(builder: (_)=>new PageTwo()),)
        .then((val)=>val?_getRequests():null),
      ),
    ));
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //somewhere
    Navigator.pop(context,true);
  }
}

如果 API 更新频繁，您也可以只使用流，新数据将在您的 ListView 中自动更新

例如使用 firebase 我们可以做到这一点

stream: FirebaseDatabase.instance.reference().child(
      "profiles").onValue

无论何时您更改数据库中的某些内容（例如从编辑个人资料页面），它都会反映在您的个人资料页面上。在这种情况下，这只是可能的，因为我使用的是onValue，它将继续监听任何更改并代表您进行更新。

Answer 2

（在您的第一页）：使用此代码导航到第二页。

Navigator.pushNamed(context, '/page2').then((_) {
  // This block runs when you have returned back to the 1st Page from 2nd.
  setState(() {
    // Call setState to refresh the page.
  });
});

（在您的第 2 页）：使用此代码返回到第 1 页。

Navigator.pop(context);

Answer 3

我只是用这个：

onPressed: () {
          Navigator.pop(context,
              MaterialPageRoute(builder: (context) => SecondPage()));
        },

关闭当前页面：

Navigator.pop

浏览上一页：

MaterialPageRoute(builder: (context) => SecondPage())

在 FirtsPage 中，我在 startUpPage 上添加此刷新：

 @override
  void initState() {
    //refresh the page here
    super.initState();
  }

Answer 4

如果您使用 GetX ： 从 nextScreen 导航返回时使用结果如下：

Get.back(result: 'hello');

并使用此功能重新加载上一页：

void _navigateAndRefresh(BuildContext context) async {
    final result = await Get.to(()=>NextScreen());
    if(result != null){
      model.getEMR(''); // call your own function here to refresh screen
    }
  }

调用这个函数而不是直接导航到 nextScreen

Answer 5

对于更细粒度、与页面无关的解决方案，我想出了这个 Android Single LiveEvent 模仿行为。

我在Provider 类中创建了这样的字段，例如：

SingleLiveEvent<int> currentYearConsumable = SingleLiveEvent<int>();

它有一个公共的设置器来设置值。公共consume 允许您仅读取一次值（如果存在）（请求 UI 刷新）。在您需要的地方调用consume（例如在build 方法中）。

您不需要Provider，您可以使用其他解决方案通过它。

实施：

/// Useful for page to page communication
/// Mimics Android SingleLiveEvent behaviour
/// https://stackoverflow.com/questions/51781176/is-singleliveevent-actually-part-of-the-android-architecture-components-library
class SingleLiveEvent<T> {
  late T _value;
  bool _consumed = true;

  set(T val) {
    _value = val;
    _consumed = false;
  }

  T? consume() {
    if (_consumed) {
      return null;
    } else {
      _consumed = true;
      return _value;
    }
  }
}