添加3个以上项目后，底部 Flutter 导航栏颜色变为透明

hjzp0vay 于 2023-03-09 发布在 Flutter

关注(0)|答案(3)|浏览(302)

- 这真的很奇怪。**添加超过3个BottomNavigationBarItem会将BottomNavigationBar的默认图标和背景颜色更改为透明。

为什么会这样？
pidoss，2到3个项目一切都很好。

class BottomNavigationTabs extends StatelessWidget {
  const BottomNavigationTabs({Key? key, required this.child}) : super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: child,
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: 'Create'),
          BottomNavigationBarItem(
              icon: Icon(Icons.favorite), label: 'Favorite'),
          // BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'), // <-- uncomment transparent the whole bottomNavigationBar
        ],
      ),
    );
  }
}

flutter

来源：https://stackoverflow.com/questions/72264138/flutter-bottomnavigationbar-colors-changes-to-transparent-after-adding-more-than

3条答案

按热度按时间

flvtvl501#

根据BottomNavigationBar文档：
底部导航栏的类型更改其项目的显示方式。如果未指定，则当项目少于四个时，它将自动设置为BottomNavigationBarType.fixed，否则将自动设置为BottomNavigationBarType.shifting。
...
BottomNavigationBarType。shifting，当存在四个或更多项时为默认值。如果selectedItemColor为null，则所有项都呈现为白色。

两种解决方案

1.最简单的解决方案是对于三个以上的项，将BottomNavigationBar类型保持为fixed。
type: BottomNavigationBarType.fixed.
1.第二个解决方案是编辑selectedItemColor颜色。

赞(0）回复(0）举报 2023-03-09

agxfikkp2#

将BottomNavigationBar的属性设置为

fixedColor: Colors.red, //Selected Icon color. Overrides primary Color

//TextStyles
showUnselectedLabels: true,
unselectedLabelStyle:
   const TextStyle(color: Colors.grey, fontWeight: FontWeight.bold),
selectedLabelStyle:
   const TextStyle(color: Colors.black, fontWeight: FontWeight.bold),

//Icon
unselectedIconTheme: const IconThemeData(color: Colors.grey),
selectedIconTheme: IconThemeData(color: Colors.red),

赞(0）回复(0）举报 2023-03-09

c90pui9n3#

对于使用主题的用户-您需要设置两个属性（unselectedItemColor和selectedItemColor）：

static ThemeData light() {
  return ThemeData(
  brightness: Brightness.light,

  bottomNavigationBarTheme: const BottomNavigationBarThemeData(
    unselectedItemColor: Colors.black45,
    selectedItemColor: Color.fromRGBO(238, 129, 39, 1.0),
  ),
  
  textTheme: lightTextTheme,
);}

赞(0）回复(0）举报 2023-03-09

我来回答

添加3个以上项目后，底部 Flutter 导航栏颜色变为透明

3条答案

两种解决方案

相关问题

热门标签

最新问答