Flutter - bottomNavigationBar 中的 SelectedItemColor 不起作用

Question

我需要显示一个带有BottomNavigationBar的界面，每个item的宽度相同，并且在选中时呈现黄色。但是似乎该属性不起作用。

以下是代码：

bottomNavigationBar: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      showUnselectedLabels: true,
      selectedItemColor: Color(0xffffd156),
      backgroundColor: Color(0xff22273d).withOpacity(1),
      currentIndex: _currentIndex,
      onTap: (int index) {
        _currentIndex = index;
        setState(() {
          _currentIndex = index;
        });
        print(_currentIndex);
        if(porraIsActive=="Active" && userPorra && _currentIndex ==1){
          Navigator.pushNamed(context, '/vistaPorra');
          _currentIndex = 0;
        }
      },
      items: getBottomBar()
  )

每个项都存储在一个列表中

    BottomNavigationBarItem(
        icon: SvgPicture.asset("images/home_24_px.svg",
        ),
        title: Text("Inicio", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),
        ),
      backgroundColor: Color(0xff22273d).withOpacity(1),
    ),
    BottomNavigationBarItem(
        icon: SvgPicture.asset("images/soccer_24_px.svg",),
        title: Text("La porra", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),
  backgroundColor: Color(0xff22273d).withOpacity(1),
    ),
    BottomNavigationBarItem(
        icon: SvgPicture.asset("images/calendar_24_px.svg",),
        title: Text("Calendario", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),

      backgroundColor: Color(0xff22273d).withOpacity(1),
    ),
    BottomNavigationBarItem(
        icon: SvgPicture.asset("images/classification_24_px.svg",),
        title: Text("Clasificacion", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),
      backgroundColor: Color(0xff22273d).withOpacity(1),
    ),
    BottomNavigationBarItem(
        icon: SvgPicture.asset("images/more_horiz_24_px.svg",),
        title: Text("Más", style: GoogleFonts.openSans(fontSize: 10, color:Color(0xff99ffffff)),),
      backgroundColor: Color(0xff22273d).withOpacity(1),
    ),
  ];

- Emmanuel Ochia

Answer 1

你应该将底部导航项放置在一个 BottomNavigationBarItem 数组中。

     bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),

这是来自Flutter网站的三个底部导航栏的完整代码。

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

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

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

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

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: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            title: Text('Business'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            title: Text('School'),
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
    );
  }
}

- san

---

实际上是一个类型为BottomNavigationBarItems的列表。 - Emmanuel Ochia

还有其他想法吗？ - Emmanuel Ochia

Answer 2

看起来它会对你有所帮助，

 getBottomBar(){
    List items = <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        title: Text('Business'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        title: Text('School'),
      ),
    ];

    return items;
  }

- Genius_balu

Answer 3

在这里我将颜色更改为绿色。试一下吧

    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'First',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.exit_to_app),
        label: 'Second',
      ),
    ],
    
    selectedItemColor: Colors.green,
  )

- Manishyadav

---

如果我没有说到点子上，请告诉我。 - Manishyadav

这是我参考的一些资源：https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html - Manishyadav