在 Flutter 的所有页面上显示 BottonNavigatorBar

Question

在我的应用程序中，我有两个页面 Page1 和 Page2。我也有显示在屏幕底部的标签栏。问题是当我从其中一个页面使用 Navigator.push 时 TabBar 消失了。看看下面的动画：

这是我所有的代码：

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

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "Hello",
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          bottomNavigationBar: TabBar(tabs: <Widget>[
              Tab(icon: Icon(Icons.directions_car)),
              Tab(icon: Icon(Icons.do_not_disturb))
            ],
            labelColor: Colors.black

            )
          ,
          body: TabBarView(children: <Widget>[
              Page1(), 
              Page2()
          ])
        )

      )
    );

  }
}

class Page1 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      body: FlatButton(
        child: Text('Go to Page 2'), 
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(
            builder: (context) {
              return Page2(); 
            }
          ));
        },
        color: Colors.orange
      )
    );

  }

}

class Page2 extends StatelessWidget {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      body: FlatButton(
        child: Text('Go to Page 1'), 
        onPressed: () {
          Navigator.push(context, MaterialPageRoute(
            builder: (context) {
              return Page1(); 
            }
          ));
        },
        color: Colors.purple
      )
    );

  }

}

Answer 1

在 Cupertino 小部件的帮助下，您可以轻松完成您想要的事情。

示例代码：

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

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

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      debugShowCheckedModeBanner: false,
      title: 'Demo App',
      home: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
                icon: Icon(Icons.event), title: Text("Tab 1")),
            BottomNavigationBarItem(
                icon: Icon(Icons.group), title: Text("Tab 2")),
          ],
          currentIndex: _currentIndex,
          onTap: (int) {
            setState(() {
              _currentIndex = int;
            });
          },
        ),
        tabBuilder: (context, int) {
          switch (int) {
            case 0:
              {
                return CupertinoTabView(
                  builder: (context) {
                    return Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Tab 1 Content'),
                          ),
                          CupertinoButton.filled(
                              child: Text('Goto next Page in Tab1'),
                              onPressed: () {
                                Navigator.push(context,
                                    CupertinoPageRoute(builder: (context) {
                                  return Body(int);
                                }));
                              })
                        ],
                      ),
                    );
                  },
                );
              }
              break;
            case 1:
              {
                return CupertinoTabView(
                  builder: (context) {
                    return Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Text('Tab 2 Content'),
                          ),
                          CupertinoButton.filled(
                              child: Text('Goto next Page in Tab2'),
                              onPressed: () {
                                Navigator.push(context,
                                    CupertinoPageRoute(builder: (context) {
                                  return Body(int);
                                }));
                              })
                        ],
                      ),
                    );
                  },
                );
              }
              break;
          }
        },
      ),
    );
  }
}

class Body extends StatefulWidget {
  final int index;

  Body(this.index);

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

class _BodyState extends State<Body> {
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Page2 of Tab${widget.index}'),
        ),
        child: Center(
          child: Container(
            child: Text('Page 2'),
          ),
        ));
  }
}

Answer 2

编辑

对不起，我误解了这个问题，这可能与Flutter: Keep BottomNavigationBar When Push to New Screen with Navigator重复

原答案

使用单个母版页并用每个子页（包含自己的内容）动态替换正文：

例子：

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _HomePageState extends State<HomePage> {
  // current page index of the bottom navigation bar
  int _currentIndex = 0;

  // update the state of the index on tab tap
  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    // list of pages of the bottom navigation bar
    final List<Widget> _children = [
      FirstPage(title: "My page 1"),
      SecondPage(title: "My page 2"),
      ThirdPage(title: "My page 3"),
    ];

    return Scaffold(
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        type: BottomNavigationBarType.shifting,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.event), title: Text("Page 1")),
          BottomNavigationBarItem(icon: Icon(Icons.group), title: Text("Page 2")),
          BottomNavigationBarItem(icon: Icon(Icons.camera_alt), title: Text("Page 3")),
        ],
      ),
    );
  }
}

那么FirstPage、SecondPage、ThirdPage只能内容自己的内容：

import 'package:flutter/material.dart';

class FirstPage extends StatefulWidget {
  FirstPage({Key key, this.title}) : super(key: key);

  final String title;

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

class _FirstPageState extends State<FirstPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: // your body content
    );
  }
}

Answer 3

推送路由会将 Widget 设置为 MaterialApp 的子级。每个屏幕都应该包含它自己的脚手架和它自己的 BottonNavigatorBar。