在我的应用程序中，我有两个页面 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
      )
    );

  }

}

最佳答案

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

关于flutter - 在 Flutter 的所有页面上显示 BottonNavigatorBar，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56277819/