Flutter应用使用Navigator.push跳转后selectedItemColor不生效问题

你当前的实现存在核心逻辑错误：每次点击导航栏选项时，通过Navigator.push将新页面压入路由栈，原包含BottomNavigationBar的页面被推到后台。虽然你调用setState更新了_SelectedIndex，但前台显示的是全新的页面（该页面未包含BottomNavigationBar），因此无法看到选中颜色的切换效果，同时还会导致路由栈不断堆积，返回时需要多次返回才能退出。

采用页面内嵌切换的方式：将BottomNavigationBar放在Scaffold的bottomNavigationBar属性中，通过更新_selectedIndex直接切换Scaffold的body内容，无需使用Navigator.push。这样BottomNavigationBar始终处于前台，选中状态会实时更新。

修改后的完整代码 #

import 'package:flutter/material.dart';

// 假设你的三个页面组件已定义，这里补充示例实现
class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) => const Center(child: Text("Home"));
}

class Order extends StatelessWidget {
  const Order({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) => const Center(child: Text("Orders"));
}

class Profile extends StatelessWidget {
  const Profile({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) => const Center(child: Text("Profile"));
}

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

  @override
  _BottomBarPageState createState() => _BottomBarPageState();
}

class _BottomBarPageState extends State<BottomBarPage> {
  // 修正变量名符合Dart命名规范（小驼峰）
  int _selectedIndex = 0;

  final List<Widget> _pages = const <Widget>[
    Home(),
    Order(),
    Profile(),
  ];

  void onTabTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    // 移除Navigator.push，直接通过状态更新切换页面
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 根据选中索引切换body内容
      body: _pages.elementAt(_selectedIndex),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: "Home",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.card_travel),
            label: "Orders",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: "Profile",
          ),
        ],
        currentIndex: _selectedIndex,
        // 明确设置选中/未选中颜色（可选，但建议显式配置）
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        onTap: onTabTapped,
      ),
    );
  }
}

1. 命名规范：Dart语言中私有变量建议使用小驼峰命名（如_selectedIndex），原代码中的_SelectedIndex不符合规范。
2. 显式配置颜色：显式设置selectedItemColor和unselectedItemColor可以避免依赖系统默认样式，确保跨平台一致性。
3. 路由栈特殊场景：如果确实需要使用Navigator.push（如某些页面需要独立的路由栈逻辑），则需要通过状态管理工具（如Provider、GetX）同步所有页面中BottomNavigationBar的选中状态，但这种方式复杂度较高，仅在特殊场景下使用。

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