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

如果您希望未选择的项目具有某种颜色，请使用：

unselectedItemColor: Colors.red,

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

示例：

不幸的是，

unselectedLabelStyle

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

另请检查此答案 unselectedLabelstyle do not work in Flutter

Answer 2

正如文档所说，您可以使用

color

的

TextStyle

属性更改文本颜色：https://api.flutter.dev/flutter/painting/TextStyle-class.html

一旦这就是perharps

BottomNavigationBar

在设置

selectedItemColor

和/或

unselectedItemColor

时覆盖颜色

尝试后，即使您不提供

selectedItemColor

和/或

unselectedItemColor

，有效的颜色也会过度

Answer 3

使用下面的简单解决方案来更改 selectedLabelStyle 和 unselectedLabelStyle -（标签文本的颜色）：

          BottomNavigationBarItem(
            activeIcon: Image.asset(
              "assets/images/race_icon_fill.png",
              height: 30,
              width: 30,
              fit: BoxFit.cover,
              color: Colors.red,
            ),
            icon: Image.asset(
              "assets/images/race_icon.png",
              height: 30,
              width: 30,
              fit: BoxFit.cover,
              color: Colors.deepPurple,
            ),
            label: 'My Races',
          ),

==========================================

            selectedItemColor: Colors.black,
            unselectedItemColor: Colors.grey,
            selectedLabelStyle: const TextStyle(
                fontWeight: FontWeight.w500, fontFamily: AlbertSans),
            unselectedLabelStyle: const TextStyle(
                fontWeight: FontWeight.w300, fontFamily: AlbertSans, color: Colors.deepPurple),