如何在Flutter中隐藏新屏幕的底部导航栏？

Question

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

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

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'),
            ),
          ),
        ],
      ),
    );
  }
}

- Jay Tillu

---

添加一些代码或提供您当前正在做的一些信息将使得寻求帮助变得容易很多。 - Christopher Moore

目前，当我路由到新屏幕时，新屏幕会出现。但底部导航栏仍然保持在相同的位置。我只是想在每个新屏幕上像 GIF 中所示的那样隐藏底部导航栏。 - Jay Tillu

我仍然不知道它是如何实现的。添加一些代码会很有帮助。 - Christopher Moore

Answer 1

你可以尝试这种方法

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

- Furkan Cetintas

---

哇塞，你的回答简单明了，但却像魔法一样解决了我的问题。谢谢！ - undefined

Answer 2

你可以复制下面的完整代码并运行
你可以检查特定按钮的 onTap index 并执行 Navigator.push

代码片段

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

- chunhunghan

---

正是我想要的，效果很好。我想得太多了。 - Shender Ramos