Flutter - 底部导航条中的SelectedItem颜色不工作。

Question

我需要在每个项目中显示一个宽度相同的BottomNavigationBar，并且在选中的项目中显示一个淡黄色，但是这个属性似乎没有用。

下面是代码

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),
    ),
  ];

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,
      ),

下面是三条底部导航栏的完整代码。翩翩网.

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,
      ),
    );
  }
}