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

在每个路径中都有一个自己的Scaffold，因为我需要为每个页面分别指定我的AppBar操作和FloatingActionButton。但是，当我将home包裹在Scaffold中并将Scaffold的正文放置到每一页时，我有两个Scaffolds彼此堆叠，这是不可能的。

因此，基本上我在我的Material App中定义了一个BottomAppBar，但需要在每个页面中覆盖AppBar和FloatingActionButton。如果您对这个问题有任何想法，谢谢。

Answer 1

您必须具有一个包含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)
      ],
    );
  }
}

然后，您可以在每个页面上设置Appbar，

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

颤抖的全局BottomAppBar，每个页面中都有不同的AppBar

1 个答案: