如何在Flutter中隐藏和取消隐藏底部标签导航

时间:2019-05-02 11:13:50

标签: flutter flutter-layout

我必须隐藏和取消隐藏我的底部标签。当我向下滚动时,它应该隐藏起来,而在反向单击时,它应该变得可见。我正在分享我的代码,直到现在我都尝试过。请帮助,因为我是新手。感谢

class App extends StatefulWidget {
 @override
 State<StatefulWidget> createState() => AppState();
 }

class AppState extends State<App> {
  TabItem currentTab = TabItem.Dashboard;
  var scheduleDict;
  var eventsDotsDict;
  bool isVisible=false;
  ScrollController _hideButtonController;

  SharedPreferences sharedPreferences;
  bool _isProgressBarShown = true;

   Map<TabItem, GlobalKey<NavigatorState>> navigatorKeys = {
   TabItem.search: GlobalKey<NavigatorState>(),
   TabItem.tracker: GlobalKey<NavigatorState>(),
   TabItem.Dashboard: GlobalKey<NavigatorState>(),
   TabItem.Calendar: GlobalKey<NavigatorState>(),
   TabItem.Chat: GlobalKey<NavigatorState>(),
  };

   void _selectTab(TabItem tabItem) {
    setState(() {
      currentTab = tabItem;
    });
  }

  @override
  void initState() {
   // TODO: implement initState
   _fetchSchedulesList();
    isVisible = true;
  _hideButtonController = new ScrollController();
   _hideButtonController.addListener(() {
    if (_hideButtonController.position.userScrollDirection ==
        ScrollDirection.reverse) {
       setState(() {
          isVisible = false;
         print("**** $isVisible up");
        });
      }
      if (_hideButtonController.position.userScrollDirection ==
      ScrollDirection.forward) {
      setState(() {
      isVisible = true;
      print("**** $isVisible down");
    });
    }
  });
  }

 @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async =>
      !await navigatorKeys[currentTab].currentState.maybePop(),
     child: Scaffold(
       body: Stack(
        children: <Widget>[
      _buildOffstageNavigator(TabItem.search),
      _buildOffstageNavigator(TabItem.tracker),
      _buildOffstageNavigator(TabItem.Dashboard),
      _buildOffstageNavigator(TabItem.Calendar),
      _buildOffstageNavigator(TabItem.Chat),
    ]),
    bottomNavigationBar:AnimatedContainer(
duration: Duration(milliseconds: 200),
height: isVisible ? 60.0 : 0.0,
child:isVisible? BottomNavigation(
      currentTab: currentTab,
      onSelectTab: _selectTab,
    ): Container(
  color: Theme.of(context).primaryColor,
  width: MediaQuery.of(context).size.width,
     ),
    ),
   ),
  );
 }

 Widget _buildOffstageNavigator(TabItem tabItem) {
   return Offstage(
    offstage: currentTab != tabItem,
    child: TabNavigator(
      navigatorKey: navigatorKeys[tabItem],
      tabItem: tabItem,
      eventsDotsDict: eventsDotsDict,
   ),
  );
 }

}

我一直坚持这个问题。我还在堆栈溢出问题上看了一些问题,但没有解决我的问题的方法。

0 个答案:

没有答案