Question

我有一个固定的BottomNavigationBar，其中包含4个项目，如下所述。

如何设置所选项目的颜色？

我尝试了：fixedColor和selectedItemColor，但是它不起作用。

BottomNavigationBar(
            type: BottomNavigationBarType.fixed,
            fixedColor: Colors.blue,
            //selectedItemColor: Colors.blue,
            currentIndex: snapshot.data.index,
            onTap: _bottomNavBarBloc.pickItem,
            items: [
              BottomNavigationBarItem(
                icon: Icon(
                  Icons.access_time,
                  color: Colors.black,
                ),
              ),
              BottomNavigationBarItem(...),
              BottomNavigationBarItem(...),
              BottomNavigationBarItem(...),
            ]);

Answer 1

有两种类型。固定或转移。如果我们添加固定类型，则在使用特定按钮时，底部导航内的按钮不会显示任何效果。它只是固定在底部导航上。如果添加shifting，则当单击特定按钮时，它将显示某种酷炫的动画。

Check this out here

一种解决方法也许是这样的：

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyHomePage(),
  ));
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentIndex = 0;

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(
        title: Text("StackoverFlow"),
      ),
      body: Container(),
      bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          currentIndex: currentIndex,
          onTap: (index) {
            setState(() {
              currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(
                Icons.access_time,
                color: currentIndex == 0? Colors.blue:Colors.black,
              ),
              title: Container(),
            ),
            BottomNavigationBarItem(
              icon: Icon(
                Icons.access_time,
                color: currentIndex == 1? Colors.blue:Colors.black,
              ),
              title: Container(),
            ),
          ]),
    );
  }
}

Answer 2

您可以为“活动和正常底部导航项目”提供不同的图标。

BottomNavigationBarItem _getNavigationItem(IconData icon, String title) {
    return BottomNavigationBarItem(
        backgroundColor: Colors.white,
        activeIcon: Icon(
          icon,
          color: Colors.teal,
        ),
        icon: Icon(icon, color: Colors.grey),
        title: Text(title),
    );
}

在BottomNavigationBarType.fixed中的活动项目上设置颜色

2 个答案: