我想创建一个带有底部导航栏的脚手架,以及一个始终显示当前页面标题的应用栏。当我更改底部栏选项时,内容会发生明显变化。到目前为止,经典的 NavigationBar 结构一切正常。但是当内容页面上应该有标签时,问题就开始了。我在 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 小部件在 View 顶部显示选项卡。有没有简单的,非hacky的方法来做到这一点?
想要的效果:
最佳答案
您可以使用嵌套 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(
// ...
)
)
关于dart - Flutter 底部导航,其中一页有选项卡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54659549/