Flutter 底部导航，其中一页有标签

Question

我想创建一个带有底部导航栏和一个始终显示当前页面标题的应用栏的脚手架。当我更改底栏选项时，内容会发生明显变化。到目前为止，一切都可以使用经典的 NavigationBar 结构。但是，当其中一个内容页面的顶部应该有标签时，问题就开始了。我在 parents 脚手架中创建了我的应用栏。无论如何要向 parent 小部件 appBar 添加标签？

我的AppBar + BottomNavBar页面：

class MainPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MainPageState();
  }
}
class _MainPageState extends State<MainPage> {

  int _currentPageIndex;
  List<Widget> _pages = List();

  Widget _getCurrentPage() => _pages[_currentPageIndex];

  @override
  void initState() {
    setState(() {
      _currentPageIndex = 0;

      _pages.add(BlocProvider(bloc: AgendaBloc(), child: AgendaPage()));
      _pages.add(SpeakersPage());
      _pages.add(MenuPage());
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar( title: 'Agenda'),
      body: _getCurrentPage(),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentPageIndex,
        onTap: (index){
          setState(() {
            _currentPageIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.content_paste),
            title: Text('Agenda'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.group),
            title: Text('Speakers'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.menu),
            title: Text('Menu'),
          ),
        ],
      ),
    );
  }
}

现在假设我希望我的 AgendaPage 小部件在视图顶部显示选项卡。有什么简单的 non-hacky 方法可以做到这一点吗？

想要的效果：

Answer 1

据我所知你不能，但我设法通过向通过 bottomNavigationBar:

导航的每个页面添加单独的 AppBar 来解决这个问题

为您的每个 _pages 提供一个单独的应用栏，并从您的 build 方法中删除主要的应用栏。

Answer 2

您可以使用嵌套的 Scaffold 小部件。这适用于 Flutter 1.1.8:

// This is the outer Scaffold. No AppBar here
Scaffold(
  // Workaround for https://github.com/flutter/flutter/issues/7036
  resizeToAvoidBottomPadding: false, 
  body: _getCurrentPage(),  // AppBar comes from the Scaffold of the current page 
  bottomNavigationBar: BottomNavigationBar(
    // ...
  )
)

Flutter 底部导航，其中一页有标签

Flutter bottom navigation where one page has tabs

cross-platform

dart

flutter

flutter-layout