Flutter中按下Device Back Button时如何转到上一个Tab？答案

【问题标题】：How to go to the previous Tab when the Device Back Button is pressed in Flutter?Flutter中按下Device Back Button时如何转到上一个Tab？
【发布时间】：2018-11-17 10:15:53
【问题描述】：

假设我点击标签“第 2 页”，然后点击“第 3 页”。现在，当我单击设备上的返回按钮时，我想返回“第 2 页”。

对我来说，应用程序关闭了。我是否使用了错误的小部件，或者我应该怎么做才能确保当用户使用设备上的后退按钮时，它会转到上一个选项卡而不是强制关闭应用程序。

class MovieRouting extends StatefulWidget {
  @override
  MovieRoutingState createState() => new MovieRoutingState();
}

// SingleTickerProviderStateMixin is used for animation
class MovieRoutingState extends State<MovieRouting> with SingleTickerProviderStateMixin {
  int i = 0;
  var pages = [new Page1(), new Page2(), new Page3(), new Page4()];   

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {  

    return new Scaffold(
      body: pages[i],
      // drawer: new AppNavigationDrawer(),
      bottomNavigationBar: new BottomNavigationBar(
        items: [
          new BottomNavigationBarItem(
            icon: new Icon(Icons.home),
            title: new Text('page 1'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.photo_library),
            title: new Text('page 2'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.book),
            title: new Text('page 3'),
          ),
          new BottomNavigationBarItem(
            icon: new Icon(Icons.notifications),
            title: new Text('page 4'),
          ),
        ],
        currentIndex: i,
        type: BottomNavigationBarType.fixed,
        onTap: (index) {
          print (index);
          setState(() {
            i = index;
          });
        },
      ),
    );

  }
}

【问题讨论】：

你必须使用嵌套的Navigators
您能提供一些示例代码的链接吗？
google("flutter nested navigators")

标签： dart flutter bottomnavigationview

【解决方案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(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MovieRouting(),
      );
    }
  }

  class Page1 extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(child: Text('page1'),);
    }
  }

  class Page2 extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(child: Text('page2'),);
    }
  }
  class Page3 extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(child: Text('page3'),);
    }
  }
  class Page4 extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Container(child: Text('page4'),);
    }

  }
  class MovieRouting extends StatefulWidget {
    @override
    MovieRoutingState createState() => new MovieRoutingState();
  }

  // SingleTickerProviderStateMixin is used for animation
  class MovieRoutingState extends State<MovieRouting> with SingleTickerProviderStateMixin {
    int i = 0;
    int _pState = 0;
    var pages = [new Page1(), new Page2(), new Page3(), new Page4()];

    @override
    void initState() {
      super.initState();
    }
    Future<bool> _onWillPop() {
      setState(() {
        i=_pState;
      });


    }

    @override
    Widget build(BuildContext context) {

      return WillPopScope(
        onWillPop: _onWillPop ,
        child: new Scaffold(
          body: pages[i],
          // drawer: new AppNavigationDrawer(),
          bottomNavigationBar: new BottomNavigationBar(
            items: [
              new BottomNavigationBarItem(
                icon: new Icon(Icons.home),
                title: new Text('page 1'),
              ),
              new BottomNavigationBarItem(
                icon: new Icon(Icons.photo_library),
                title: new Text('page 2'),
              ),
              new BottomNavigationBarItem(
                icon: new Icon(Icons.book),
                title: new Text('page 3'),
              ),
              new BottomNavigationBarItem(
                icon: new Icon(Icons.notifications),
                title: new Text('page 4'),
              ),
            ],
            currentIndex: i,
            type: BottomNavigationBarType.fixed,
            onTap: (index) {
              print (index);
              setState(() {
                _pState = i;
                i = index;

              });
            },
          ),
        ),
      );

    }
  }

【讨论】：

【解决方案2】：

这是控制后退按钮的另一种方法，当按下它时它会转到第一个选项卡，然后如果在 2 秒内再次按下它会关闭应用程序（或任何你想做的事情）在你的状态类中定义一个布尔变量，用 WillPopScope 小部件包装你的脚手架，将 _onWillPop() 函数作为其 OnwillPop 属性传递。

  bool canback = false;

return WillPopScope(
            child: Scaffold(...),
            onWillPop: _onWillPop);

 Future<bool> _onWillPop() async {

    if (canback == true) {
      SystemChannels.platform.invokeMethod('SystemNavigator.pop');
    }else{
      setState(() {
        index=0;
      });
    }

    Timer(Duration(seconds: 2), () {
      setState(() {
        canback = false;
      });
    });
    canback = true;
  }

【讨论】：