Flutter中BottomNavigationBarItem点击后无法切换蓝色高亮状态

一、修复选中项高亮问题 #

只有Home能保持蓝色的核心原因是当前选中索引未正确更新，需通过状态变量绑定选中状态：

• 定义状态变量_currentIndex存储当前选中项的索引
• 将BottomNavigationBar的currentIndex属性绑定到该变量
• 在onTap回调中调用setState更新索引（针对需要切换页面的项）

二、实现Defaults点击跳转新页面 #

点击Defaults打开新页面无需切换当前页面，直接用Navigator.push打开新路由即可，无需修改选中索引（或根据需求临时高亮）。

完整代码示例 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomNav Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final List<Widget> _pages = const [
    Center(child: Text('Home Page')),
    Center(child: Text('Placeholder')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('BottomNav Demo')),
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icons.settings, label: 'Defaults'),
        ],
        onTap: (index) {
          if (index == 0) {
            setState(() => _currentIndex = index);
          } else if (index == 1) {
            // 跳转至Defaults新页面
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => const DefaultsPage()),
            );
            // 若需临时高亮Defaults，可取消下方注释
            // setState(() => _currentIndex = index);
          }
        },
      ),
    );
  }
}

// 新页面组件
class DefaultsPage extends StatelessWidget {
  const DefaultsPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Defaults Page')),
      body: const Center(child: Text('这是Defaults页面')),
    );
  }
}

关键说明 #

1. 高亮修复：_currentIndex与currentIndex绑定，点击Home时通过setState更新状态，确保选中项同步高亮。
2. 页面跳转：Navigator.push是Flutter打开新路由的标准方式，跳转后返回原页面时，选中状态会保持跳转前的状态；若需要点击Defaults时临时高亮，可取消代码中对应的注释。

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