單擊后退按鈕時，在底部導航欄中更改動畫狀態

Question

我已經在我的應用程序中使用了此底部導航欄庫，並且效果很好。 但是我想在Android手機中使用后退按鈕來保持后退導航 ，例如在Google Play商店底部導航中，如果我們在底部導航中導航，動畫也會發生變化；如果在后退按鈕中導航，動畫也會發生變化之前的方式。

我已經嘗試過這篇文章，它正在做我想做的事，但是動畫不起作用。

這是我的有狀態窗口小部件，我的底部導航欄在其中，

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int currentIndex;
  final PageStorageBucket bucket = PageStorageBucket();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    currentIndex = 0;
  }

  void changePage(int index) {
    setState(() {
      currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      resizeToAvoidBottomInset : false,
      body:
        new Stack(
          children: <Widget>[
            new Offstage(
              offstage: currentIndex != 0,
              child: new TickerMode(
                enabled: currentIndex == 0,
                child: new MaterialApp(home: new HomePage()),
              ),
            ),
            new Offstage(
              offstage: currentIndex != 1,
              child: new TickerMode(
                enabled: currentIndex == 1,
                child: new MaterialApp(home: new StayPage()),
              ),
            ),
            new Offstage(
              offstage: currentIndex != 2,
              child: new TickerMode(
                enabled: currentIndex == 2,
                child: new MaterialApp(home: new TravelPage()),
              ),
            ),
            new Offstage(
              offstage: currentIndex != 3,
              child: new TickerMode(
                enabled: currentIndex == 3,
                child: new MaterialApp(home: new MorePage()),
              ),
            ),
          ],
        ),

      floatingActionButton: Visibility(
        visible: _isVisible,
        child: Container(
          height: 100.0,
          width: 85.0,
//        margin: EdgeInsets.only(bottom: 5.0),
          child: FittedBox(
            child: FloatingActionButton.extended(
              onPressed: () {
                setState(() {});
              },
              elevation: 20.0,
              icon: Icon(Icons.add),
              label: Text(
                "Plan",
                style: TextStyle(
                  fontFamily: "OpenSansBold",
                ),
              ),
              backgroundColor: Colors.red,
            ),
          ),
        ),
      ),

      floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,

      bottomNavigationBar: Visibility(
        visible: _isVisible,
        child: BubbleBottomBar(
          hasInk: true,
          fabLocation: BubbleBottomBarFabLocation.end,
          opacity: .2,
          currentIndex: currentIndex,
          onTap: changePage,
          elevation: 15,
          items: <BubbleBottomBarItem>[
            BubbleBottomBarItem(
                backgroundColor: Colors.red,
                icon: Icon(
                  Icons.home,
                  color: Colors.black,
                ),
                activeIcon: Icon(
                  Icons.home,
                  color: Colors.red,
                ),
                title: Text(
                  "Home",
                  style: TextStyle(
                    fontFamily: "OpenSans",
                  ),
                )),

            BubbleBottomBarItem(
              backgroundColor: Colors.deepPurple,
              icon: Icon(
                Icons.hotel,
                color: Colors.black,
              ),
              activeIcon: Icon(
                Icons.hotel,
                color: Colors.deepPurple,
              ),
              title: Text(
                "Stay",
                style: TextStyle(
                  fontFamily: "OpenSans",
                ),
              ),
            ),
            BubbleBottomBarItem(
              backgroundColor: Colors.indigo,
              icon: Icon(
                Icons.card_travel,
                color: Colors.black,
              ),
              activeIcon: Icon(
                Icons.card_travel,
                color: Colors.indigo,
              ),
              title: Text(
                "Travel",
                style: TextStyle(
                  fontFamily: "OpenSans",
                ),
              ),
            ),
            BubbleBottomBarItem(
              backgroundColor: Colors.green,
              icon: Icon(
                Icons.more,
                color: Colors.black,
              ),
              activeIcon: Icon(
                Icons.more,
                color: Colors.green,
              ),
              title: Text(
                "More",
                style: TextStyle(
                  fontFamily: "OpenSans",
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

不必使用該庫，我只想實現底部導航欄，並且在使用android后退按鈕導航時，動畫必須能夠正常工作。

任何幫助將不勝感激！ 謝謝！

Answer 1

解決了我的問題。 我使用的是Swav Kulinski的中型帖子 ，我在前面的問題中已經指出過。

代碼如下，

class NavBar extends StatefulWidget {
  @override
  _NavBarState createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {

  final navigatorKey = GlobalKey<NavigatorState>();

  int currentIndex;
  final PageStorageBucket bucket = PageStorageBucket();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    currentIndex = 0;
  }

  void changePage(int index) {
    navigatorKey.currentState.pushNamed(pagesRouteFactories.keys.toList()[index]);
    setState(() {
      currentIndex = index;
    });
  }

  Future<bool> _onWillPop() {

    if(currentIndex == 3){
      changePage(2);
    } else if(currentIndex == 2){
      changePage(1);
    } else if(currentIndex == 1){
      changePage(0);
    } else if(currentIndex == 0){
      return Future.value(false);
    }

    return Future.value(true);
  }

  final pagesRouteFactories = {
    "/": () => MaterialPageRoute(
      builder: (context) => Center(
        child: Text("HomePage",style: Theme.of(context).textTheme.body1,),
      ),
    ),
    "takeOff": () => MaterialPageRoute(
      builder: (context) => Center(
        child: Text("Take Off",style: Theme.of(context).textTheme.body1,),
      ),
    ),
    "landing": () => MaterialPageRoute(
      builder: (context) => Center(
        child: Text("Landing",style: Theme.of(context).textTheme.body1,),
      ),
    ),
    "settings": () => MaterialPageRoute(
      builder: (context) => Center(
        child: Text("Settings",style: Theme.of(context).textTheme.body1,),
      ),
    ),
  };

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WillPopScope(
        onWillPop: _onWillPop,
        child: Scaffold(
          body: _buildBody(),
          bottomNavigationBar: _buildBottomNavigationBar(context),
        ),
      ),
    );
  }

  Widget _buildBody() =>
      MaterialApp(
          navigatorKey: navigatorKey,
          onGenerateRoute: (route) => pagesRouteFactories[route.name]()
      );

  Widget _buildBottomNavigationBar(context) => BottomNavigationBar(
    items: [
      _buildBottomNavigationBarItem("Home", Icons.home),
      _buildBottomNavigationBarItem("Take Off", Icons.flight_takeoff),
      _buildBottomNavigationBarItem("Landing", Icons.flight_land),
      _buildBottomNavigationBarItem("Settings", Icons.settings)
    ],
    currentIndex: currentIndex,
    onTap: changePage,
  );

  _buildBottomNavigationBarItem(name, icon) => BottomNavigationBarItem(
      icon: Icon(icon),
      title: Text(name),
      backgroundColor: Colors.black45,
      activeIcon: Icon(icon)
  );
}

我不知道這是否是正確的方法。 如果有人想建議我更好的選擇，請告訴我。