android - Flutter 全局 BottomAppBar，每个 Page 有不同的 AppBar

Question

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

我当前的 MaterialApp：

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(),
);

在每个 Route 中都是一个自己的Scaffold，因为我需要为每个页面指定我的AppBar操作和单独的操作。FloatingActionButton但是当我将homea包裹起来Scaffold并制作每一页的主体时Scaffold，我有两个Scaffolds相互堆叠，这是不可能的。

所以基本上我的 Material App 中需要一个 BottomAppBar，但需要覆盖每个页面中的 AppBar 和 FloatingActionButton。

标签： androidflutterdart

Answer 1

You have to have a common screen that has BottomAppBar and doesn't declare its child pages into routes, then you can declare Appbar on each of child page.

For ex,

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

Then you can have Appbar on each page like this,

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")));
            },
          ),
.......