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

Question

在主页中，我根据导航栏选项将小部件调用到我的主体 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 一样，不应将Scaffold 与MaterialApp 包装在一起。

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

Answer 2

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

你需要纠正一些事情：

• 仅在 Scaffold 上方 _NavState 的 build() 方法中使用 MaterialApp

• 从早餐类中移除 MaterialApp 和 Scaffold 小部件

• 在早餐课程中使用 Gridview 构建器之前的容器。请记住，在替换 Scaffolds 主体时，您只想在其中拥有像 Container 这样的较低级别的小部件，而不是像其他 Scaffolds 这样的整个构建块。

• 根据 _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 方法以获取模型值并返回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 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！

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