Flutter中BottomNavigationBar透明度未按预期生效问题求助

问题核心是：BottomNavigationBar内部的Material组件默认使用主题里的colorScheme.surface颜色（默认是偏灰的色调），当你设置低透明度的backgroundColor时，这个透明色会和底层的灰色surface混合，最终呈现出浑浊的灰色，而不是你想要的浅红色。

你之前尝试修改canvasColor没用是因为这个属性是给Drawer、BottomSheet这类组件用的，和BottomNavigationBar无关。下面给两个可行的解决办法：

方法一：直接使用不透明的浅红色 #

如果不需要透明效果，直接用Flutter提供的预设浅红色色值，避免颜色混合问题：

BottomNavigationBar(
  backgroundColor: Colors.red[100], // 直接用不透明的浅红色
  type: BottomNavigationBarType.fixed,
  // 其他配置
)

方法二：修改Theme的surface颜色（保留透明效果） #

如果一定要用透明背景，需要把BottomNavigationBar内部Material的底色改成白色，通过修改colorScheme.surface实现：

局部修改（仅针对当前BottomNavigationBar） #

bottomNavigationBar: Theme(
  data: Theme.of(context).copyWith(
    colorScheme: Theme.of(context).colorScheme.copyWith(
          surface: Colors.white,
        ),
  ),
  child: BottomNavigationBar(
    backgroundColor: Colors.red.withOpacity(0.1),
    type: BottomNavigationBarType.fixed,
    // 其他配置
  ),
),

全局修改（应用内所有BottomNavigationBar生效） #

在MaterialApp的主题配置里设置：

MaterialApp(
  theme: ThemeData().copyWith(
    colorScheme: ColorScheme.fromSwatch().copyWith(
      surface: Colors.white,
    ),
    scaffoldBackgroundColor: Colors.white,
  ),
  // 其他配置
)

这样设置后，低透明度的红色背景就会和白色底层混合，呈现出正常的浅红色效果。

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