Jetpack Compose Button设置不透明背景出现颜色不均问题

我在Jetpack Compose中为Button设置半透明背景色时遇到了问题，简化测试代码如下：

<!-- res/values/colors.xml -->
<color name="opaque_button_background">#33FFFFFF</color>

Button(
    onClick = { },
    shape = RoundedCornerShape(8.dp),
    colors = ButtonDefaults.buttonColors(
        backgroundColor = colorResource(R.color.opaque_button_background)
    ),
) {
    Text(text = "Hello")
}

运行后按钮中间区域颜色明显深于边缘，即使移除内部Text内容，问题依然存在。

原因 #

这是因为Compose的Button默认带有elevation（阴影），当你设置半透明背景色时，Material2的Surface或Material3的Container下方的阴影会透过半透明背景显现出来：中间区域被阴影完全覆盖，叠加后颜色更深；边缘区域阴影向外扩散，仅背景色与父布局叠加，所以颜色更浅，最终呈现出“内部有独立背景”的视觉效果。

解决办法 #

• 方法一：移除Button的默认阴影
  将Button的elevation参数设置为null（Material2）或指定所有状态下的elevation为0.dp，彻底消除阴影：

  // Material2 写法
  Button(
      onClick = { },
      shape = RoundedCornerShape(8.dp),
      elevation = null,
      colors = ButtonDefaults.buttonColors(
          backgroundColor = colorResource(R.color.opaque_button_background)
      ),
  ) {
      Text(text = "Hello")
  }
  

  如果是Material3，需要通过ButtonDefaults.buttonElevation统一设置所有状态的阴影高度：

  // Material3 写法
  Button(
      onClick = { },
      shape = RoundedCornerShape(8.dp),
      elevation = ButtonDefaults.buttonElevation(
          defaultElevation = 0.dp,
          pressedElevation = 0.dp,
          focusedElevation = 0.dp
      ),
      colors = ButtonDefaults.buttonColors(
          containerColor = colorResource(R.color.opaque_button_background)
      ),
  ) {
      Text(text = "Hello")
  }
  

• 方法二：自定义无阴影按钮
  若不需要Button的默认交互封装，可直接用Box+Modifier实现自定义按钮，完全规避默认阴影影响：

  Box(
      modifier = Modifier
          .background(
              color = colorResource(R.color.opaque_button_background),
              shape = RoundedCornerShape(8.dp)
          )
          .clickable { }
          .padding(horizontal = 16.dp, vertical = 8.dp),
      contentAlignment = Alignment.Center
  ) {
      Text(text = "Hello")
  }
  

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