dart - 在Flutter中按下“设备后退”按钮时，如何转到上一个选项卡？

Question

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

对我而言，该应用程序已关闭。我使用的是错误的Widget还是应该做的是确保用户使用设备上的后退按钮时，它会转到上一个选项卡而不强制关闭应用程序。

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

  }
}

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(
        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;

              });
            },
          ),
        ),
      );

    }
  }