如何在底部屏幕上隐藏底部导航栏？

Question

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

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

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

Answer 1

您可以在下面复制粘贴运行完整代码
您可以检查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"),
      ),
    );
  }
}