Flutter Card Widget疑问：elevation属性为何会改变卡片颜色？

为什么Card的背景色会随elevation变化？ #

这是Material 3设计规范的默认行为——为了强化组件的视觉层次感，当组件elevation（海拔）提升时，会在背景色上叠加一层半透明的主题色（通常是主题的surface tint颜色）。elevation越高，叠加的颜色层越明显，你看到的粉色应该就是当前主题配置里的tint颜色在高海拔时的体现，Android模拟器的渲染是符合Material 3设计逻辑的。

如何避免这个现象？ #

有几种实用的解决方式：

• 固定Card背景色：直接给Card的color属性指定固定颜色，比如color: Colors.white，这样不管elevation怎么调整，背景色都不会变化。
• 关闭elevation叠加效果：在主题配置里修改Card的theme，将elevationOverlayColor设为透明。示例代码：

  ThemeData(
    cardTheme: CardTheme(
      elevationOverlayColor: Colors.transparent,
    ),
  )
  

• 切换到Material 2主题：如果不需要Material 3的特性，可以在MaterialApp里指定使用Material 2主题，这样就不会有elevation叠加颜色的逻辑。

推荐的替代Widget #

如果需要elevation效果但不想背景色自动变化，可以试试这些组件：

• Container：通过BoxDecoration的boxShadow属性自定义阴影（模拟elevation），背景色完全由自己控制，示例：

  Container(
    color: Colors.white,
    decoration: BoxDecoration(
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.3),
          blurRadius: 8,
          offset: Offset(0, 2),
        ),
      ],
    ),
  )
  

• Material：作为基础的Material组件，设置elevation和固定color，默认不会自动叠加颜色（除非主题开启了overlay，关闭方式和Card一致）。
• PhysicalModel：可以更灵活地控制阴影的形状、颜色和扩散程度，背景色完全自定义，没有自动变色的逻辑。

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