用户按下时如何更改 BottomNavigationBarItem(child) 的背景颜色？不更改所有导航栏颜色

Question

我希望我点击的每个菜单都会为每个点击的菜单改变颜色，而不是导航栏的整个颜色背景。

就像这个例子：

当用户点击“靠近我”菜单时，菜单上的框会改变颜色。但是对于另一个菜单上的背景/颜色框，它仍然是黑色的。同理，点击其他菜单颜色会变成红色，不会改变没有点击的菜单颜色（还是黑色）

这是我的代码：

int _page = 0;
final List<Widget> _children = [
    MainPage(),
    MainPage(),
    MainPage(),
    MainPage(),
    MainPage(),
  ];

... 


bottomNavigationBar: Theme(
            data: Theme.of(context).copyWith(
              canvasColor: Color(0xFF3B3D58),
              primaryColor: Colors.white,
              textTheme: Theme.of(context).textTheme.copyWith(
                caption: TextStyle(color: Colors.grey)
              )
            ),
            child: BottomNavigationBar(
              type: BottomNavigationBarType.fixed,
              currentIndex: _page,
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text('Home'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.add_circle),
                  title: Text('Add Place'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.near_me),
                  title: Text('Near Me'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.favorite),
                  title: Text('Favorite'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.more_horiz),
                  title: Text('More'),
                ),
              ],
              onTap: onTabTapped,
            ),
          ),

这是我的代码的结果：

Answer 1

我找到了这个解决方法：
在这里试试：
https://dartpad.dev/?id=60405c72383f2114decc8486b427e03e&null_safety=true

代码在这里：

import 'package:flutter/material.dart';


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

/// This is the main application widget.
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  static const TextStyle optionStyle =
      TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
  static const List<Widget> _widgetOptions = <Widget>[
    Text(
      'Index 0: Home',
      style: optionStyle,
    ),
    Text(
      'Index 1: Business',
      style: optionStyle,
    ),
    Text(
      'Index 2: School',
      style: optionStyle,
    ),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      ),
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          _bottomNavigationBarItem(Icons.home, 'Home'),
          _bottomNavigationBarItem(Icons.business, 'Home'),
          _bottomNavigationBarItem(Icons.school, 'Home'),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        elevation: 0,
        onTap: _onItemTapped,
      ),
    );
  }

  BottomNavigationBarItem _bottomNavigationBarItem(
      IconData icon, String label) {
    return BottomNavigationBarItem(
      activeIcon: _navItemIcon(icon, label, Colors.red, Colors.white),
      icon: _navItemIcon(icon, label, Color(0xff3b3c58), Colors.grey),
      title: Padding(padding: EdgeInsets.all(0)),
    );
  }

  Row _navItemIcon(IconData icon, String label, Color? backgrondColor,
      Color? foregroundColor) {
    return Row(
      children: [
        Expanded(
          child: Container(
            color: backgrondColor,
            child: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Column(
                children: [
                  Icon(
                    icon,
                    color: foregroundColor,
                  ),
                  Text(
                    label,
                    style: TextStyle(color: foregroundColor),
                  )
                ],
              ),
            ),
          ),
        ),
      ],
    );
  }
}