Flutter：如何实时修改Persistent Bottom Navigation Bar背景色？

要实现点击页面按钮切换底部导航栏背景色，你需要通过状态管理控制颜色变量，并让子页面能触发状态更新，具体步骤如下：

1. 调整状态类基础结构 #

先修正原代码的问题：把PersistentTabController的初始化移到initState中，避免每次build执行时重复创建控制器；同时新增控制背景色的状态变量。

class _BottomMenu extends State<BottomMenu> {
  late PersistentTabController _controller;
  // 新增：控制导航栏背景色的状态变量，初始为白色
  Color _navBarBgColor = Colors.white;

  @override
  void initState() {
    super.initState();
    // 控制器移至initState初始化
    _controller = PersistentTabController(initialIndex: 0);
  }

  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
      context,
      controller: _controller,
      screens: _buildScreens(),
      items: _navBarsItems(),
      confineInSafeArea: true,
      // 使用状态变量作为导航栏背景色
      backgroundColor: _navBarBgColor,
      handleAndroidBackButtonPress: true,
      resizeToAvoidBottomInset: true,
      stateManagement: false,
      hideNavigationBarWhenKeyboardShows: true,
      decoration: NavBarDecoration(
        borderRadius: BorderRadius.circular(10.0),
        // 同步修改导航栏背后区域的颜色
        colorBehindNavBar: _navBarBgColor,
      ),
      popActionScreens: PopActionScreensType.all,
      screenTransitionAnimation: const ScreenTransitionAnimation(
        animateTabTransition: true,
        curve: Curves.ease,
        duration: Duration(milliseconds: 10),
      ),
      navBarStyle: NavBarStyle.style6,
    );
  }

2. 给子页面传递颜色切换回调 #

修改_buildScreens()方法，给需要添加切换按钮的页面传入回调函数，用于触发底部导航栏的颜色切换：

List<Widget> _buildScreens() {
  return [
    // 示例：给首页传入切换回调
    HomePage(
      onToggleColor: () {
        setState(() {
          // 切换颜色：白色↔黑色
          _navBarBgColor = _navBarBgColor == Colors.white ? Colors.black : Colors.white;
        });
      },
    ),
    // 其他页面保持原有实现
    const SecondScreen(),
    const ThirdScreen(),
  ];
}

3. 子页面实现按钮触发逻辑 #

以HomePage为例，定义接收回调的参数，并在按钮点击时调用该回调：

class HomePage extends StatelessWidget {
  final VoidCallback onToggleColor;

  const HomePage({super.key, required this.onToggleColor});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("首页")),
      body: Center(
        child: ElevatedButton(
          onPressed: onToggleColor,
          child: const Text("切换导航栏背景色"),
        ),
      ),
    );
  }
}

关键说明 #

• 必须通过setState()更新状态变量，才能触发PersistentTabView重建，实现颜色实时切换。
• 同步修改backgroundColor和colorBehindNavBar，确保导航栏及其背后区域颜色统一。
• 如果页面结构复杂，也可使用Provider、Bloc等状态管理库传递颜色状态，避免多层回调嵌套。

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