Flutter persistent_bottom_nav_bar报错及自定义样式适配问询

报错原因 #

1. The method '_BottomBarState' isn't defined for the type 'BottomBar'
   你的_BottomBarState类与BottomBar StatefulWidget处于同级作用域，而StatefulWidget要求状态类要么是其内部嵌套类，要么在可见作用域内，当前BottomBar的createState方法无法正确找到_BottomBarState。

2. 1 positional argument(s) expected, but 0 found
   你单独定义的@override Widget build(BuildContext context)不属于任何类，它本该是_BottomBarState的成员方法，脱离类后调用时缺少必要上下文参数，因此触发报错。

解决方法（保留原有底部导航栏样式） #

要在保留原有样式的同时实现持久化导航，只需利用persistent_bottom_nav_bar的customWidget参数，将你原来的BottomNavigationBar作为自定义导航栏传入，同时用PersistentTabController管理页面切换状态。

以下是修正后的完整代码：

class BottomBar extends StatefulWidget {
  const BottomBar({Key? key}) : super(key: key);

  @override
  State<BottomBar> createState() => _BottomBarState();
}

class _BottomBarState extends State<BottomBar> {
  final PersistentTabController _controller = PersistentTabController(initialIndex: 0);

  // 页面列表，与原有逻辑一致
  List<Widget> _navScreens() {
    return [
      HomeScreen(),
      const Text("History"),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
      context,
      controller: _controller,
      screens: _navScreens(),
      // 传入自定义导航栏，复用原有BottomNavigationBar样式
      customWidget: CustomNavBarWidget(
        controller: _controller,
        items: const [
          BottomNavigationBarItem(
              icon: Icon(FluentSystemIcons.ic_fluent_home_regular),
              label: "Home"),
          BottomNavigationBarItem(
              icon: Icon(FluentSystemIcons.ic_fluent_history_regular),
              label: "History"),
        ],
      ),
      confineInSafeArea: true,
      handleAndroidBackButtonPress: true,
      resizeToAvoidBottomInset: true,
      hideNavigationBarWhenKeyboardShows: true,
      popAllScreensOnTapOfSelectedTab: true,
      // 使用自定义导航栏时，该参数可设为none
      navBarStyle: NavBarStyle.none,
    );
  }
}

// 自定义导航栏组件，封装原有BottomNavigationBar
class CustomNavBarWidget extends StatelessWidget {
  final PersistentTabController controller;
  final List<BottomNavigationBarItem> items;

  const CustomNavBarWidget({
    Key? key,
    required this.controller,
    required this.items,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        BottomNavigationBar(
          currentIndex: controller.index,
          onTap: (index) {
            controller.jumpToTab(index);
          },
          // 保留你原有代码中省略的样式配置，比如backgroundColor、type等
          items: items,
        ),
      ],
    );
  }
}

关键说明 #

• 将_BottomBarState嵌套进BottomBar类中，确保createState能正确引用状态类。
• 用CustomNavBarWidget封装你原来的BottomNavigationBar，通过PersistentTabController同步选中索引与页面切换，实现持久化效果。
• 原有BottomNavigationBar的所有样式配置（比如背景色、图标大小、文字样式等）都可以完整保留在CustomNavBarWidget里，完全不改变原有视觉效果。

内容的提问来源于stack exchange，提问作者A_K