推送新屏幕时保留BottomAppBar

Question

我正在开发一个 Flutter 应用程序，它始终有一个可见的 BottomAppBar，只有两个选项卡。 浏览这两个选项卡工作正常，但我想在点击 appBar 和选项卡之一上的图块之一时推送一个新屏幕。

我已经尝试过导航器，但是当推动新屏幕时，BottomAppBar 消失了

相关代码如下：

main.dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'DemoApp',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
            primaryColor: ...,
        home: HomePage());
  }
}

home_page.dart

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: new AppBar(
          title: new Text('DemoApp'),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.account_circle),
              tooltip: "Account settings",
              onPressed: () {
                Navigator.push(context, MaterialPageRoute(builder: (context) => UserDetail('test')));
              },
            )
          ],
        ),
        body: WalletTab(),
        bottomNavigationBar: FABBottomAppBar(
          color: Theme.of(context).primaryColorLight,
          onTabSelected: _selectedTab,
          selectedColor: Theme.of(context).primaryColor,
          notchedShape: CircularNotchedRectangle(),
          items: [
            FABBottomAppBarItem(iconData: Icons.home, text: 'Wallet'),
            FABBottomAppBarItem(iconData: Icons.location_on, text: 'Store')
          ],
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: () {},
            tooltip: '',
            ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        resizeToAvoidBottomPadding: false);
  }
}

编辑： 我已将项目推送到 github 上：https://github.com/punkeroso/demo

有什么建议吗？ 谢谢你

Answer 1

在这些情况下，请考虑尝试使用底部导航栏，这样在多个页面之间导航时实现固定栏会更容易。 我认为你无法找到其他方法，即使有，效率也会很低。

Answer 2

您可以使用 PageView 而不是导航到新路线，或者您可以使用具有内置 PageView 的 auto_route 包。

AutoTabsRouter.pageView(            
 routes: [            
    BooksTab(),            
    ProfileTab(),            
    SettingsTab(),            
    ],           
 builder: (context, child, _) {            
    final tabsRouter = AutoTabsRouter.of(context);      
    return Scaffold(            
          appBar: AppBar(            
          title: Text(context.topRoute.name),            
          leading: AutoLeadingButton()),            
          body: child,            
          bottomNavigationBar: BottomNavigationBar(                
                currentIndex: tabsRouter.activeIndex,                
                onTap: tabsRouter.setActiveIndex                
                items: [                
                  BottomNavigationBarItem(label: 'Books',...),                
                  BottomNavigationBarItem(label: 'Profile',...),                
                  BottomNavigationBarItem(label: 'Settings',...),                
                ],                
              ),          
        ),            
  ); },          

）；