Question

我想在飘动中使用精美的底部导航。当我在选项卡之间切换时，它仅在导航栏上显示选项卡切换，但是主体没有切换。我切换时未显示其他标签。这是我的代码

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写道here，该键道具默认为null，仅用于选项卡的程序化选择。仅当您想通过不单击实际按钮来更改选项卡时，此特殊用例才有意义。您不需要此功能。您可以在第48至50行查看example，了解关键道具的实际用例。

还要检查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');
          });
        },
      )
    );
  }

底部导航栏不切换标签

1 个答案: