单击后退按钮时更改底部导航栏中的动画状态

Question

我在我的应用程序中使用了 this 底部导航栏库，它运行良好。但我想在 android 手机中使用后退按钮维护 后退导航 ，例如在 Google Play Store 底部导航中，如果我们通过底部导航导航动画会改变，如果我们通过后退按钮向后导航，动画也会改变之前的方式。

我试过 this 文章，该文章有点符合我的要求，但动画不工作。

这是我的底部导航栏所在的有状态小部件，

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 的媒体post，我之前在我的问题中指出了这一点。

代码如下，

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

不过我不知道这是否是正确的方法。如果有人想建议我更好的选择，请告诉我。

单击后退按钮时更改底部导航栏中的动画状态

Changing animation state in bottom navigation bar while clicking back button

android

dart

flutter

bottomnavigationview