Flutter应用程序返回按钮事件无法重定向到上一页

Question

我正在开发一个Flutter Android应用程序，它有三个屏幕：页面1、页面2和页面3。当我从页面2进入页面3时，如果我点击手机的返回按钮，它应该返回到页面2。但是它却重定向到了页面1。我从在Flutter中捕获Android返回按钮事件中获取引用后尝试了一下。

我尝试了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"),)
        );
    }
    }

第二页

    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"),)
            ],
            )
        );
    }
    }

第三页

    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);
        },
        );
    }
    }

- Joe

Answer 1

你可能对你创建的“屏幕”和“页面”有些混淆了。实际上，你拥有比你需要的更多的小部件。

以下是你可能想要做的事情。

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(),
          ),
        ],
      ),
    );
  }
}

- Feu

---

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

不要忽略Stateless，它很有用> :) 但是，如果页面有Scaffold，你需要那个状态 - 并保持一个页面x一个Scaffold的比例，你在同一页中嵌套了许多。 - Feu

但是我想将代码写在不同的文件中。例如，我在page1中编写stateless，在page2和page3中使用不带stateless的不同dart文件进行编写，可以吗？ - Joe

无论是无状态还是有状态，您都可以将所有内容写入多个文件中！ - Feu

如果您已经有了这样一个简单的设置，但返回按钮仍然无法正常工作，您有什么建议吗？即使使用WillPopScope并在其中放置onWillPop: () async => Navigator.of(context).pop()也不起作用吗？ - CularBytes

Answer 2

在您的第三页中，请尝试使用

。

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

- iPatel

---

我尝试了这个方法，但无效。它没有进入 onWillPop 方法。 - Joe

Answer 3

对于我的情况，我应该将Flutter的master分支升级到最新代码。

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

- Mina Farid