按下后退按钮时 Flutter 应用程序崩溃

Question

我的应用主页有一个搜索栏。当点击搜索栏时，用户将被重定向到搜索页面，如下所示：

class _HomeAppBarState extends State<HomeAppBar> {
  @override
  Widget build(BuildContext context) {
    return AppBar(
        backgroundColor: Colors.white,

        leading: IconButton(
            icon: Icon(Icons.account_circle, color: Colors.black) , onPressed: () => Scaffold.of(context).openDrawer()
        ),

        title: TextField(
          onTap: () {Navigator.push(context, MaterialPageRoute(builder: (context) => Search()));},
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.search, color: Colors.black),
            hintText: "Search...",
          ),
        )
    );
  }
}

在搜索页面中。应用栏有一个后退按钮，然后按下后退按钮我希望用户回到主页。我尝试使用 Navigator.pop 如下：

class _SearchAppBarState extends State<SearchAppBar> {
  @override
  Widget build(BuildContext context) {
    return AppBar(
        backgroundColor: Colors.white,

        leading: IconButton(
            icon: Icon(Icons.arrow_back, color: Colors.black) , onPressed: () => Navigator.pop(context)
        ),

        title: TextField(
          autofocus: true,
          //onChanged: Do Stuff here.
          decoration: InputDecoration(
            prefixIcon: Icon(Icons.search, color: Colors.black),
            hintText: "Search App Bar...",
          ),
        )
    );
  }
}

但是当按下返回按钮时我得到了非常奇怪的结果。

屏幕保持这样，当我再次单击返回按钮时，它停留在搜索页面。

Answer 1

• 尝试使用automaticallyImplyLeading: true,仅在搜索栏小部件上。而不是提供后退按钮并手动处理导航堆栈。

• 从根小部件中删除手动或自动返回按钮。

另外，用WillPopScope 包裹root 小部件：

build(BuildContext context) {
  return WillPopScope(
    onWillPop: () async => false,
     child: //you root widget,
    ); 
}

WillPopScope 小部件将忽略任何后按事件以弹出“根”小部件，因此不会出现您遇到的问题。

有关WillPopScope的更多详细信息，请访问本文： https://codingwithjoe.com/flutter-navigation-how-to-prevent-navigation/

关于屏幕显示的问题，

如果 HomePage 是应用程序的父/根小部件，则在弹出 HomeWidget 时应该会导致黑屏。但看起来扭曲的屏幕视图是模拟器的一个错误。