第 4 个 BottomNavigationBarItem 覆盖颜色答案

【问题标题】：4th BottomNavigationBarItem overrides color第 4 个 BottomNavigationBarItem 覆盖颜色
【发布时间】：2021-12-02 22:41:58
【问题描述】：

下面的代码按预期工作。但是，如果我取消注释第四个 BottomNavigationBarItem，则应用栏背景颜色会覆盖靛蓝背景颜色并变为白色。我不明白为什么添加一个项目会导致这种情况。想法？

class _HomeState extends State<Home> {
  static List<Widget> pages = const <Widget>[
    NewEntryScreen(),
    TodaysReviewScreen(),
    AllEntriesScreen(),
    SettingsScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Consumer<AppStateManager>(
      builder: (
        context,
        appStateManager,
        child,
      ) {
        return Scaffold(
          appBar: AppBar(
            title: Text(
              'Most Learned',
              style: Theme.of(context).textTheme.headline6,
            ),
          ),
          body: IndexedStack(
            index: widget.currentTab,
            children: pages,
          ),
          bottomNavigationBar: BottomNavigationBar(
            backgroundColor: Colors.indigo,
            selectedItemColor:Colors.orange,
            unselectedItemColor: Colors.teal,
            currentIndex: widget.currentTab,
            onTap: (index) {
              Provider.of<AppStateManager>(context, listen: false)
                  .goToTab(index);
            },
            items: const <BottomNavigationBarItem>[
              BottomNavigationBarItem(
                  icon: Icon(Icons.emoji_objects), label: 'New'),
              BottomNavigationBarItem(
                  icon: Icon(Icons.access_time), label: 'Daily'),
              BottomNavigationBarItem(icon: Icon(Icons.toc), label: 'All'),
              // BottomNavigationBarItem(
              //     icon: Icon(Icons.settings), label: 'Settings'),
            ],
          ),
        );
      },
    );
  }
}

【问题讨论】：

您将列表标记为 const （这意味着该列表是编译时常量），这可能是与您的模拟器的热重载有关的问题。尝试重新启动它或将列表标记为最终（运行时常量）。
重新启动（与热重载相反）会产生相同的结果。对不起，补救问题，但我如何改变到最终？我用 final 替换了 const 并得到错误“预期和标识符”
顺便说一句，我能够通过从 bottomNavigationBar 移动背景参数并在 4 个 BottomNavigationBarItem 中的每一个上调用它来解决 UI 问题，但这似乎是一个 hack。我仍然很好奇根本问题是什么。
已解决：挖掘 Flutter 的 bottom_navigation_bar.dart。 4 个或更多项目默认为 BottomNavigationBarType: 'shifting' 而 3 个或更少默认为类型 'fixed'。如果各个项目的背景颜色为空，则这些类型中的每一个都默认为不同的背景颜色（白色与 ColorScheme.primary）。一个合乎逻辑的原因对我来说毫无意义，但谜团解开了！
在这种情况下，您不能直接将其设置为 final（如果您将列表存储在 final 变量中是可能的） - 也请将您的答案作为分析器发布并接受以供将来参考

标签： flutter

【解决方案1】：

已解决：

四个或更多项目默认为 BottomNavigationBarType: 'shifting' 当单个项目为空时默认为背景颜色 ColorScheme.primary。

三个或更少默认类型'fixed'，当item为null时默认为白色。

不确定为什么需要进行更改，但是...

Flutter 的 bottom_navigation_bar.dart：

///  * [BottomNavigationBarType.fixed], the default when there are less than
///    four [items]. The selected item is rendered with the
///    [selectedItemColor] if it's non-null, otherwise the theme's
///    [ColorScheme.primary] color is used for [Brightness.light] themes
///    and [ColorScheme.secondary] for [Brightness.dark] themes.
///    If [backgroundColor] is null, The
///    navigation bar's background color defaults to the [Material] background
///    color, [ThemeData.canvasColor] (essentially opaque white).
///  * [BottomNavigationBarType.shifting], the default when there are four
///    or more [items]. If [selectedItemColor] is null, all items are rendered
///    in white. The navigation bar's background color is the same as the
///    [BottomNavigationBarItem.backgroundColor] of the selected item. In this
///    case it's assumed that each item will have a different background color
///    and that background color will contrast well with white.

【讨论】：