Flutter 应用程序后退按钮事件未重定向到后页

Posted 2023-03-28

【中文标题】Flutter 应用程序后退按钮事件未重定向到后页

【英文标题】：Flutter app back button event not redirecting to back page

【发布时间】：2019-05-16 22:58:03

【问题描述】：

我正在开发一个颤振的安卓应用程序。它有三个屏幕。第 1 页，第 2 页，第 3 页。当我从第 2 页进入第 3 页时。如果我单击手机后退按钮，它想进入第 2 页。 但它正在重定向到第 1 页。我在得到参考后尝试过 catch android back button event on Flutter

我试过 WillPopScope 。没有进入onWillPop。

如何解决问题。我的代码如下所示。

第 1 页

    void main() => runApp(MyApp());
    class MyApp extends StatelessWidget 
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) 
        return MaterialApp(
        home: Scaffold(
            appBar: new AppBar(),
            body: MyAppPage()
        ),
        );
    
    

    class MyAppPage extends StatefulWidget
    MyAppPage(Key key,):super(key:key);

    @override
    _MyAppPageState createState()=> new _MyAppPageState();
    

    class _MyAppPageState extends State<MyAppPage>

    @override
    Widget build(BuildContext context)
        return new Scaffold(
        body:RaisedButton(onPressed:() Navigator.push(context, MaterialPageRoute(builder: (context) => SecondScreen()));,
        child: new Text("got to page 1"),)
        );
    
    

第 2 页

    class SecondScreen extends StatelessWidget
    @override
    Widget build(BuildContext context) 
        return MaterialApp(
        home: Scaffold(
            appBar: new AppBar(),
            body: SecondPage()
        ),
        );
    
    

    class SecondPage extends StatefulWidget
    SecondPage(Key key,):super(key:key);
    @override
    SecondPageState createState()=> new SecondPageState();
    

    class SecondPageState extends State<SecondPage>
    @override
    Widget build(BuildContext context)
        return new Scaffold(
            body:Column(
            children: <Widget>[
                new Center(
                child: new Text("Page 2"),
                ),
                RaisedButton(onPressed:() Navigator.push(context, MaterialPageRoute(builder: (context) => ThirdScreen()));,
                child: new Text("go to third Page 3"),)
            ],
            )
        );
    
    

第 3 页

    class ThirdScreen extends StatelessWidget
    @override
    Widget build(BuildContext context) 
        return MaterialApp(
        home: Scaffold(
            appBar: new AppBar(),
            body: ThirdPage()
        ),
        );
    
    

    class ThirdPage extends StatefulWidget
    ThirdPage(Key key,):super(key:key);
    @override
    ThirdPageState createState()=> new ThirdPageState();
    

    class ThirdPageState extends State<ThirdPage>
    @override
    Widget build(BuildContext context)
        return new WillPopScope(
        child: new Scaffold(
            body:  new Center(
            child: new Text('PAGE 3'),
            ),
        ),
        onWillPop: ()
            debugPrint("onWillPop");
            return new Future(() => false);
        ,
        );
    
    

【参考方案1】：

您对自己创建的Screen 和Pages 有点困惑。实际上，您拥有的 Widget 比您需要的多。

这可能是您想要做的。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) 
    return MaterialApp(home: MyAppPage());
  


class MyAppPage extends StatefulWidget 
  @override
  _MyAppPageState createState() => _MyAppPageState();


class _MyAppPageState extends State<MyAppPage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text("Page 1")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Center(child: Text("got to page 1")),
          RaisedButton(
            child: Text("Go to Page 2"),
            onPressed: () 
              Navigator.push(context, MaterialPageRoute(builder: (context) => SecondPage()));
            ,
          ),
        ],
      ),
    );
  


class SecondPage extends StatefulWidget 
  @override
  _SecondPageState createState() => _SecondPageState();


class _SecondPageState extends State<SecondPage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text("Page 2")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Center(
            child: Text("I'm in Page 2"),
          ),
          RaisedButton(
            onPressed: () 
              Navigator.push(context,
                  MaterialPageRoute(builder: (context) => ThirdPage()));
            ,
            child: Text("go to third Page 3"),
          )
        ],
      )
    );
  


class ThirdPage extends StatefulWidget 
  @override
  _ThirdPageState createState() => _ThirdPageState();


class _ThirdPageState extends State<ThirdPage> 
  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(title: Text("Page 3")),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Center(child: Text('PAGE 3')),
          RaisedButton(
            child: Text("aditional back button"),
            onPressed: () => Navigator.of(context).pop(),
          ),
        ],
      ),
    );
  

【讨论】：

是的，我得到了答案。我避免无状态并使用有状态。谢谢

不要避免无状态，它很有用> :) 但是，如果它是带有 Scaffold 的页面，则需要该状态 - 并保持比例为一页 x 一个脚手架，您在同一页。

但是我想把代码写在不同的文件里。例如，我在第 1 页、第 2 页和第 3 页写无状态，我在没有无状态的不同 dart 文件中编写。还好吗？

您可以将所有内容写入多个文件，无论它是无状态的还是有状态的！ ?

如果您已经进行了如此简单的设置但后退按钮仍然无法使用，您有什么建议吗？即使使用WillPopScope 并且只是将`onWillPop: () async => Navigator.of(context).pop()` 放在那里也不起作用？

【参考方案2】：

在你的第三页，尝试使用

 onWillPop: () 
    Navigator.of(context).pop();
  ,

【讨论】：

我试过这个但没有用。它没有进入 onWillPop 方法。

【参考方案3】：

就我而言，我应该将颤振 master 分支升级到最新代码。

flutter channel master
flutter upgrade --force
flutter doctor -v