Question

我在我的应用中使用了this底部导航栏库，它运行完美。但是我想在Android手机中使用后退按钮保持后退导航，例如在Google Play商店底部导航中，如果我们通过底部导航进行导航，动画也会发生变化，并且如果我们向后导航后退按钮，动画将改变以前的方式。

我尝试过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)
  );
}

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

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

1 个答案: