底部导航栏未在颤动中切换选项卡

Question

我想在flutter中使用花哨的底部导航。当我在选项卡之间切换时，它只在导航栏上显示选项卡切换，但正文没有切换。当我切换时，它不会显示其他选项卡。这是我的代码

return Scaffold(
body: _getPage(currentPage),
bottomNavigationBar: FancyBottomNavigation(
key: bottomNavigationKey,
tabs: [
TabData(iconData: Icons.home,title: 'Home'),
TabData(iconData: Icons.search, title: 'Search'),
TabData(iconData: Icons.person, title: 'Profile'),
],
onTabChangedListener:   (position){
setState(() {
currentPage = position;
final FancyBottomNavigationState fState =
bottomNavigationKey.currentState;
fState.setPage(position);
print('currentPage = $currentPage');
});
},
)
);
_getPage(int page){
switch(page) {
case 0:
return Page1();
case 1:
return Search();
case 2:
return Profile();
}
}

Answer 1

此处不需要GlobalKey。只要在setState中设置currentPage值就足够了。

Dev Nathan Withers在这里写道，密钥道具默认为null，仅用于选项卡的编程选择。只有当您想通过不单击实际按钮来更改选项卡时，此特殊用例才相关。您不需要此功能。您可以查看第48到50行的示例，了解关键道具的实际用例。

还要检查IndexedStack是否适合您。它保存页面状态。您的_getPage((方法在每个交换机上销毁并新建每个页面。

我把所有的东西放在这个例子里：

class _HomePageState extends State<HomePage> {
int _currentPage = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
top: false,
child: IndexedStack(
index: _currentPage,
children: [StartView(), AllServicesView()],
),
),
bottomNavigationBar: FancyBottomNavigation(
tabs: [
TabData(iconData: Icons.home,title: 'Home'),
TabData(iconData: Icons.search, title: 'Search'),
],
onTabChangedListener: (position){
setState(() {
_currentPage = position;
print('currentPage = $_currentPage');
});
},
)
);
}