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

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

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

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

它有一个public setter 来设置值。 Public consume 允许您只读取一次值（如果存在）（请求 UI 刷新）。在需要的地方调用 consume（比如在 build 方法中）。

你不需要Provider，你可以使用其他解决方案来传递它。

实施：

/// Useful for page to page communication
/// Mimics Android SingleLiveEvent behaviour
/// 
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;
    }
  }
}

Answer 3

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

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 页）：使用此代码 return 回到第 1 页。

Navigator.pop(context);

Answer 4

我只是用这个：

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 5

如果您使用的是 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

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

How to go back and refresh the previous page in Flutter?

flutter

dart

navigation

back

onbackpressed