Android 颤振全局底部AppBar，每个页面中有不同的AppBar

我想要在MaterialApp中定义的全局BottomAppBar

我目前的材料pp：

return MaterialApp(
  initialRoute: '/overview',
  routes: {
    '/overview': (context) => OverViewPage(),
    '/summary': (context) => SummaryPage(),
    '/record': (context) => RecordPage(""),
    '/calendar': (context) => Calendar(),
    '/piechart': (context) => PieChartPage()
  },
  debugShowCheckedModeBanner: false,
  title: 'Flutter Demo',
  theme: lightTheme,
  home: OverViewPage(),
);

每个路由中都有一个自己的

Scaffold

，因为我需要为每个页面分别指定我的

AppBar

操作和

floatingAction按钮。但是，当我将
主页
包装在
脚手架
中，并将
脚手架的主体
放在每一页上时，我有两个
脚手架
堆叠在一起，这是不可能的

因此，基本上我需要在我的Material应用程序中使用BottomAppBar，但需要覆盖每个页面中的AppBar和FloatingAction按钮

您必须有一个具有BottomAppBar且不将其子页面声明为路由的公共屏幕，然后您可以在每个子页面上声明Appbar

例如

class BottomNavigation extends StatelessWidget{

// add child pages in _widgetOptions
  static List<Widget> _widgetOptions = <Widget>[
    FeedTab(),
    ChatTab(),
    Marketplace(),
    Profile(),
  ];
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: Scaffold(
            body: Center(
              child: _widgetOptions.elementAt(_selectedIndex),
            ),
            bottomNavigationBar: BottomNavigationBar(
              showUnselectedLabels: true,
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.menu),
                  title: Text(
                    'Feed',
                    style: tabTextStyle,
                  ),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.forum),
                  title: Text('Chat', style: tabTextStyle),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.explore),
                  title: Text('Market Place', style: tabTextStyle),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.person),
                  title: Text('My Profile', style: tabTextStyle),
                ),
              ],
//        type: BottomNavigationBarType.fixed,
              currentIndex: _selectedIndex,
              unselectedItemColor: AppColors.colorHint,
              selectedItemColor: AppColors.themeColor,
              onTap: _onItemTapped,
            ),
          ),
        ),
        if (!isConnectedToInternet)
          _showInternetStatus('No Internet Connection', AppColors.colorRed),
//        if (isConnectedToInternet && isConnectionWidgetVisible)
//          _showInternetStatus('Connected to Internet', AppColors.colorGreen)
      ],
    );
  }
}

这个概念也适用于BottomAppBar。它是BottomAppBar还是BottomNavigationBar并不重要
class FeedTab extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: Icon(Icons.person_pin),
            onPressed: () {
              Scaffold.of(context)
                  .showSnackBar(SnackBar(content: Text("My Followers Post")));
            },
          ),
.......