移动到另一个页面后如何隐藏导航栏（颤动）？

Question

在主页中，我根据导航栏选项将小部件调用到我的 body main.dart，在主页中它有一个图像列表，如果我单击其中一个图像，它会显示我的细节。问题是详细信息页面中的导航栏仍然显示。如何隐藏导航栏？

Main.dart

class MyApp extends StatefulWidget {
  @override
  _NavState createState() => _NavState();
}

class _NavState extends State {
  int _selectedIndex = 0;

  final _widgetOptions = [
    Breakfast(),
    Desert(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _widgetOptions.elementAt(_selectedIndex),
      bottomNavigationBar: Container(
        color: Colors.grey[100],
        child: DefaultTabController(
          length: 2,
          child: TabBar(
            indicatorColor: Colors.grey,
            labelColor: Colors.blueAccent,
            unselectedLabelColor: Colors.grey,
            onTap: _onItemTapped,
            tabs: [
              Tab(
                text: 'Breakfast',
              ),
              Tab(
                text: 'Dessert',
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

我调用到主页的小部件之一

class Breakfast extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final title = "Fatoni's Resto Menu";
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {},
            )
          ],
        ),
        body: GridView.builder(
          itemCount: DataBreakfast.listViewData.length,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemBuilder: (context, index) {
            return Column(
              children: <Widget>[
                Expanded(
                  child: Card(
                    margin: EdgeInsets.all(10.0),
                    child: InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) {
                              return DetailScreen(
                                  name: DataBreakfast.listViewData[index],
                                  image: DataBreakfast.listViewDataImage[index],
                                  info: DataBreakfast.listViewDataInfo[index],
                                  index: index);
                            },
                          ),
                        );
                      },
                    ),
                  ),
                )
              ],
            );
          },
        ),
      ),
    );
  }
}

Answer 1

_widgetOptions，如 Breakfast，不应该用 MaterialApp 包裹 Scaffold。

MaterialApp 应该在您应用的根目录附近。

Answer 2

您没有在点击操作中进行页面转换。如果您只是更改主屏幕的主体，其他部分当然仍然可见。事实上，你不应该将一个全新的 Scaffold 放入另一个 scaffold 主体中。并且肯定不是其他人已经指出的 MaterialApp Widget。

您需要更正一些事情：

只在Scaffold上面的_NavState的build()方法中使用MaterialApp
从早餐中删除 MaterialApp 和 Scaffold 小部件class
在早餐时使用 Gridview 构建器之前的容器 class。请记住，在更换脚手架主体时，您只想在其中放置容器等较低级别的小部件，而不是像其他脚手架那样的整个构建块。
根据 _NavState 的状态使 bottomNavigationBar 可见

喜欢：

bottomNavigationBar: _selectedIndex == 0 ? 
   Container(
    color: Colors.grey[100],
    child: DefaultTabController(...) 
   : null

Answer 3

你也可以使用 provider！我已经使用了这个解决方案，我希望这可以帮助其他人

在 main 方法中将 ChangeNotifierProvider 作为 runApp() 参数传递：

void main() {
  runApp(
    providers: [
      ChangeNotifierProvider(create: (_) => BottomModel()),
      // add any other providers model
      ],
      child: MyApp(),
     ),
   );
  }

然后在 build 方法中创建 Consumer 类型的 BottomModel 和 builder 方法来获取模型值和 return BottonNavigationBar 之类的下面：

      @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Material App',
      home: Scaffold(
        backgroundColor: backgroundColor,
        bottomNavigationBar: Consumer<BottomModel>(
          builder: (context, height, child) {
            return Wrap(children: [
              Container(
                height: height.getHeight(),
                child: BottomNavigationBar(
                  currentIndex: _curentState,
                  onTap: (index) {
                    setState(() => _curentState = index);
                  },
                  items: [
                    BottomNavigationBarItem(
                    ......

注意：如您所知，我们不会直接为底部导航栏设置高度！所以我们必须将它添加到 Container 并将高度设置为

和 BottomModel class 应该是这样的：

class BottomModel extends ChangeNotifier {
  double _height = 60;
  double getHeight() => _height;

  void updateHeight(double height) {
    _height = height;
    notifyListeners();
  }
}

现在您可以使用此方法随时随地更改底部导航高度

Provider.of<BottomModel>(context , listen : false).updateHeight(height)

记住你不应该忘记在提供者方法中设置 listen : false！

最后我很抱歉我的英语不好

移动到另一个页面后如何隐藏导航栏（颤动）？

How to hide navigation bar after moving to another page (flutter)?

state

navigationbar

flutter