如何在颤动的新屏幕上隐藏底部导航栏？答案

【问题标题】：how to hide Bottom Navigation Bar on new screen in flutter?如何在颤动的新屏幕上隐藏底部导航栏？
【发布时间】：2020-08-31 15:09:35
【问题描述】：

就像这里当我点击计时器时，底部导航栏消失了。我想在颤振上实现同样的事情。每当我点击底部导航栏项目时，对于新屏幕，底部导航栏不应该出现。

这是我的代码。我的底部导航栏有四个项目，我想在路由到新屏幕时隐藏底部导航栏。

class MyFeedScreen extends StatefulWidget {
     @override
  _MyFeedScreenState createState() => _MyFeedScreenState();
}

class _MyFeedScreenState extends State<MyFeedScreen> {
  int _bottomNavIndex = 0;

  Widget pageCaller(int index) {
    switch (index) {
      case 0:
        {
          return Category();
        }
      case 1:
        {
          return Feed();
        }
      case 3:
        {
          return Settings();
        }
    }
  }

  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      body: pageCaller(_bottomNavIndex),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: klogoBlue,
        selectedItemColor: Color(0xfff5f5f5),
        unselectedItemColor: Color(0xfff5f5f5),
        selectedFontSize: 12.0,
        type: BottomNavigationBarType.fixed,
        currentIndex: _bottomNavIndex,
        onTap: (index) {
          setState(() {
            _bottomNavIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Padding(
              padding:
                  EdgeInsets.only(top: SizeConfig.blockSizeVertical * 0.60),
              child: Icon(Icons.category),
            ),
            title: Padding(
              padding: EdgeInsets.symmetric(
                  vertical: SizeConfig.blockSizeVertical * 0.60),
              child: Text('Category'),
            ),
          ),
          BottomNavigationBarItem(
            icon: Padding(
              padding:
                  EdgeInsets.only(top: SizeConfig.blockSizeVertical * 0.60),
              child: Icon(FontAwesomeIcons.newspaper),
            ),
            title: Padding(
              padding: EdgeInsets.symmetric(
                  vertical: SizeConfig.blockSizeVertical * 0.60),
              child: Text('My Feed'),
            ),
          ),
          BottomNavigationBarItem(
            icon: Padding(
              padding:
                  EdgeInsets.only(top: SizeConfig.blockSizeVertical * 0.60),
              child: Icon(Icons.refresh),
            ),
            title: Padding(
              padding: EdgeInsets.symmetric(
                  vertical: SizeConfig.blockSizeVertical * 0.60),
              child: Text('Refresh'),
            ),
          ),
          BottomNavigationBarItem(
            icon: Padding(
              padding:
                  EdgeInsets.only(top: SizeConfig.blockSizeVertical * 0.60),
              child: Icon(Icons.settings),
            ),
            title: Padding(
              padding: EdgeInsets.symmetric(
                  vertical: SizeConfig.blockSizeVertical * 0.60),
              child: Text('Settings'),
            ),
          ),
        ],
      ),
    );
  }
}

【问题讨论】：

添加一些代码或提供一些有关您当前正在做的事情的信息会更容易提供帮助。
目前，当我路由到一个新屏幕时，新屏幕就在那里。但底部导航栏保持在同一位置。我只是想隐藏每个新屏幕上的底部导航栏，就像 GIF 中显示的那样。
我还不知道它是如何实现的。添加一些代码会很有帮助。

标签： flutter flutter-layout

【解决方案1】：

你可以试试这个方法

    Navigator.of(context, rootNavigator: true).push(MaterialPageRoute(
              builder: (_) => NewScreen(),
            ),
          );

【讨论】：

【解决方案2】：

您可以在下面复制粘贴运行完整代码
您可以检查onTap index 并为特定按钮执行Navigator.push

代码sn-p

void _onItemTapped(int index) {

    if (index != 2) {
      setState(() {
        _bottomNavIndex = index;
      });

      print(_bottomNavIndex);
    } else {
      Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => Settings()),
      );
    }

  }

  Widget pageCaller(int index) {
    switch (index) {
      case 0:
        {
          return Category();
        }
      case 1:
        {
          return Feed();
        }
    }
  }

工作演示

完整代码

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _bottomNavIndex = 0;

  void _onItemTapped(int index) {

    if (index != 2) {
      setState(() {
        _bottomNavIndex = index;
      });

      print(_bottomNavIndex);
    } else {
      Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => Settings()),
      );
    }

  }

  Widget pageCaller(int index) {
    switch (index) {
      case 0:
        {
          return Category();
        }
      case 1:
        {
          return Feed();
        }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Center(
        child: pageCaller(_bottomNavIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Category'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Feed'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('Settings'),
          ),
        ],
        currentIndex: _bottomNavIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

class Category extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Category"),
      ),
    );
  }
}

class Feed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Feed"),
      ),
    );
  }
}

class Settings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Settings'),
      ),
      body: Center(
        child: Text("Settings"),
      ),
    );
  }
}

【讨论】：