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

Posted 2023-02-23

【中文标题】Flutter中如何返回刷新上一页？

【英文标题】：How to go back and refresh the previous page in Flutter?

【发布时间】：2018-09-24 14:43:48

【问题描述】：

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

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

【问题讨论】：

“刷新第1页”是什么意思？

@RaoufRahiche 比如更新Page1中的listview。

Force Flutter navigator to reload state when popping的可能重复

【参考方案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，它将继续监听任何更改并代表您进行更新。

【讨论】：

我们如何做到这一点***.com/questions/55296501/…

只需将 .then((val)=>val?_getRequests():null) 替换为 .then((val)=>_getRequests()) 即可。否则会出现bool != null exception。

【参考方案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);

【参考方案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();
  

【参考方案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

【参考方案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://***.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;