Flutter CupertinoTabBar激活导航项背景色设置及底部横线去除求助

你遇到的横线是CupertinoTabBar自带的选中状态指示器，默认渲染优先级高于自定义的activeIcon组件，因此无法被自定义背景覆盖，可通过以下方案解决：

• 方案1：匹配指示器颜色和激活项背景（最快实现）
  直接给CupertinoTabBar新增selectionIndicatorColor属性，取值和你activeIcon的背景色一致即可，代码修改如下：

CupertinoTabBar(
  backgroundColor: CupertinoTheme.of(context).primaryColor,
  activeColor: Colors.black,
  inactiveColor: Colors.white,
  iconSize: 25,
  // 新增这行，将选中指示器颜色设为激活项背景色
  selectionIndicatorColor: CupertinoTheme.of(context).primaryContrastingColor,
  items: <BottomNavigationBarItem>[
    // 原有item代码保持不变
  ],
)

• 方案2：彻底隐藏选中指示器
  如果不需要任何指示器效果，直接将上述属性值改为完全透明即可：

selectionIndicatorColor: Colors.transparent,

• 补充优化建议
  为了避免activeIcon设置double.infinity导致的布局溢出问题，建议给CupertinoTabBar增加固定高度配置：

CupertinoTabBar(
  // 新增高度配置，可根据视觉需求调整数值
  height: 60,
  // 其余原有属性保持不变
)

以上修改完全保留CupertinoTabScaffold的页面持久化特性，不会影响原有导航逻辑。

内容的提问来源于stack exchange，提问作者Also James