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

Posted 2023-04-13

【中文标题】Flutter单击后退按钮时如何执行

【英文标题】：Flutter how to execute when clicking back button

【发布时间】：2018-07-12 23:18:39

【问题描述】：

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

任何帮助都会很棒。

【问题讨论】：

您不想再次调用 initState，根据 Navigator.pop 更改状态会更容易

我该怎么做，这是appBar中的后退按钮，有没有办法通过弹出来影响它？

在下方查看我的答案

@Robert 看到这个链接，我已经回答了这个问题，关于如何在导航栏上的后退按钮被按下时调用 initState 或更新数据***.com/questions/51927885/…

【参考方案1】：

您可以使用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(
  ...
  ),
 );

希望我的问题是正确的，这会有所帮助:)！

【讨论】：

谢谢！这通常是要走的路，因为您通常希望拦截“弹出”，而不仅仅是 AppBar 的后退按钮。顺便说一句，我刚刚在 ios 中发现了 WillPopScope 的一个奇怪行为，因为它禁用了向后滑动。请参阅：github.com/flutter/flutter/issues/14203。

【参考方案2】：

您可以覆盖AppBar上的默认后退箭头，然后指定要返回的值以在调用Navigator.pop时触发状态更改：

伪代码

所以您需要在导航按钮的onPressed 回调中包含类似的内容

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

在你的 newRoute 中你应该有这样的东西

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

我正在检查null 或true 这两个值，因为当用户在android 屏幕（屏幕底部的那个）上点击BackButton 时返回空值。我也相信 null 也将与 Flutter 中的默认 BackButton 返回，因此您实际上不需要覆盖 leading 属性，但我自己没有检查过，所以可能值得检查。

【讨论】：

那么第一个 onPressed 是在第一页吗？然后覆盖结果页面上的前导？

确切地说，导航值将在您导航回第一页时解析，这就是您在推送和弹出返回值之间链接的方式

如果设备上的后退按钮怎么办？

@stuckedoverflow 尝试使用 WillPopScope - 请参见下面的示例

【参考方案3】：

//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,
            );
          
    
    Future<bool> onBackPress() 
        if (isShowSticker) 
          setState(() 
            isShowSticker = false;
          );
        
    
        return Future.value(false);