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;

              });
            },
          ),
        ),
      );

    }
  }

Answer 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;
  }

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

2 个答案: