BottomNavigationBar // 无法控制item标签颜色

Question

目标：我想根据是否选中来为项目标签指定特定的字体和颜色。

我的方法：由于标签不能直接设置样式，我使用属性“unselectedLabelStyle”和“selectedLabelStyle”。

问题:

这些属性适用于字体和字体粗细，但我无法直接控制文本颜色
我可以影响选中项的标签颜色；但不是使用“selectedLabelStyle”属性，而是使用我在“seltectedItemColor”下指定的颜色。
"unselectedLabelStyle" 也适用于字体和字体粗细，但不适用于颜色。我找不到可以让我更改颜色的属性。 > 这就是问题所在

美图（代码如下）：

代码：

BottomNavigationBar(
      elevation: 0,
      onTap: (index) => selectPage(index),
      currentIndex: selectedPageIndex,
      selectedItemColor:
          Provider.of<CustomColors>(context).customColorScheme['Dark Teal'],
      unselectedLabelStyle:
          Provider.of<CustomTextStyle>(context, listen: false)
              .customTextStyle('IconLabel'),
      selectedLabelStyle:
          Provider.of<CustomTextStyle>(context, listen: false)
              .customTextStyle('IconLabel'),
      backgroundColor: Colors.white,
      type: BottomNavigationBarType.fixed,
      items: [
        //home
        bottomNavIcon(
          context: context,
          icon: Image.asset(
            "assets/icons/icon_home.png",
          ),
          icon_active: Image.asset("assets/icons/icon_home.png",
              color: Provider.of<CustomColors>(context)
                  .customColorScheme['Dark Teal']),
          label: 'Home',
        ),
        //favorite
        bottomNavIcon(
          context: context,
          icon: Image.asset("assets/icons/icon_favorite.png"),
          icon_active: Image.asset("assets/icons/icon_favorite.png",
              color: Provider.of<CustomColors>(context)
                  .customColorScheme['Dark Teal']),
          label: 'Favorite',
        ),
        //loockback
        bottomNavIcon(
          context: context,
          icon: Image.asset("assets/icons/icon_lookback.png"),
          icon_active: Image.asset("assets/icons/icon_lookback.png",
              color: Provider.of<CustomColors>(context)
                  .customColorScheme['Dark Teal']),
          label: 'Lookback',
        ),
        //info & support
        bottomNavIcon(
          context: context,
          icon: Image.asset("assets/icons/icon_info.png"),
          icon_active: Image.asset("assets/icons/icon_info.png",
              color: Provider.of<CustomColors>(context)
                  .customColorScheme['Dark Teal']),
          label: 'Info & Support',
        ),
      ],
    ),

图标代码

BottomNavigationBarItem bottomNavIcon(
{required BuildContext context,
required Image icon,
required Image icon_active,
required String label}) {


return BottomNavigationBarItem(
    icon: Padding(
      padding: EdgeInsets.only(top: 6.h, bottom: 3.h),
      child: icon,
    ),
    activeIcon: Padding(
      padding: EdgeInsets.only(top: 6.h, bottom: 3.h),
      child: icon_active,
    ),
    label: label,
  );
}

Answer 1

如文档所述，您可以使用 TextStyle 的 color 属性更改文本颜色：https://api.flutter.dev/flutter/painting/TextStyle-class.html

一旦这个说的 perharps BottomNavigationBar 在设置时覆盖颜色 selectedItemColor and/or unselectedItemColor

尝试后，即使您不提供，颜色也会有效覆盖selectedItemColor and/or unselectedItemColor

Answer 2

如果您希望未选中的项目具有特定颜色，请使用：

unselectedItemColor: Colors.red,

这将更改未选中项目的标签和图标的颜色。

示例：

不幸的是，unselectedLabelStyle 属性适用于更改字体粗细、字体大小等，但不适用于颜色。

同时检查

的答案

BottomNavigationBar // 无法控制item标签颜色

BottomNavigationBar // Cannot control item label color

flutter

flutter-layout

flutter-navigation

flutter-bottomnavigation