Flutter点击后退按钮时如何执行

问题描述 投票:0回答:5

我有一个从底部选项卡导航调用的页面,该页面执行 initState 函数,然后我通过单击按钮导航到具有详细信息和要执行的操作的页面,但是当我单击后退按钮转到原始页面时,initState 会执行此操作不再运行,我发现,因为当您将一个放在顶部时,Flutter 不会破坏页面,因为 NAV 不在新页面上,因为它不在菜单中,我如何让 initState 在单击后退按钮时再次运行或还有另一种方法可以监听后退按钮的导航并运行需要更新数据的代码吗?

任何帮助都会很棒。

flutter dart navigation back-button
5个回答
44
投票

您可以使用 WillPopScope 收听弹出窗口(创建一个小部件,注册回调以否决用户尝试关闭封闭的 [ModalRoute] 的尝试。-> 来自文档):

@override
Widget build(BuildContext context) {
 return WillPopScope(
  onWillPop: () {
    print('Backbutton pressed (device or appbar button), do whatever you want.');

    //trigger leaving and use own data
    Navigator.pop(context, false);

    //we need to return a future
    return Future.value(false);
  },
  child: Scaffold(
  ...
  ),
 );
}

希望我能正确回答你的问题,这会有所帮助:)!


31
投票

您可以覆盖

AppBar
上的默认后退箭头,然后指定您想要返回的值,以在调用
Navigator.pop
时触发状态更改:

伪代码

所以你需要在导航按钮的

onPressed
回调中有这样的东西

onPressed: ()async{
            var nav = await Navigator.of(context).push(newRoute);
            if(nav==true||nav==null){
              //change the state
            }
          },

在你的新路线中你应该有这样的东西

new AppBar(
        leading: new IconButton(
          icon: new Icon(Icons.arrow_back),
          onPressed: (){Navigator.pop(context,true)}
        ),

我正在检查

null
true
这两个值,因为当用户点击 Android 屏幕上的后退按钮(屏幕底部的那个)时,会返回 null 值。我还相信 Flutter 中默认的 BackButton 也会返回 null,所以你实际上不需要重写
leading
属性,但我自己还没有检查过,所以可能值得检查。


2
投票
//if you want to perform  any operation on back button so you can use WillPopScope Widget and managed your code inside onWillpop method 

   
 @override
 Widget build(BuildContext context) {
        return WillPopScope( 

        child:Column()),

        onWillPop: onBackPress);
   }
        
   
// this is onBackPress method
 Future<bool> onBackPress() {
        // your code 
   return Future.value(false);
 }

0
投票

就我而言,只需调用 whenComplete() 就足够了。看一下这个例子:

Navigator.push(context,
        MaterialPageRoute(builder: (context) => const YourRoute()))
    .whenComplete(() {
  // Do something when back to previous state
});

0
投票

WillPopScope 自 v3.12.0-1.0.pre 起已弃用

代替使用:

PopScope(
  canPop: true,
  onPopInvoked : (didPop){
   // logic
  },
)
© www.soinside.com 2019 - 2024. All rights reserved.