如何在Jetpack Compose中将图片按钮的紫色自动填充背景改为白色

你的代码存在两处问题：一是按钮颜色配置的位置错误，导致白色背景不生效；二是MediaPlayer的创建方式不符合Composable生命周期规范，容易引发内存泄漏。以下是修正后的完整代码：

@Composable
fun generateButtons(modifier: Modifier = Modifier) {
    val mContext = LocalContext.current
    // 用remember缓存MediaPlayer，避免重组时重复创建实例
    val mediaPlayer = remember {
        MediaPlayer.create(mContext, R.raw.shush1).apply {
            setVolume(1F, 1F)
        }
    }

    // 在Composable销毁时释放MediaPlayer，防止内存泄漏
    DisposableEffect(Unit) {
        onDispose {
            mediaPlayer.release()
        }
    }

    Row(modifier = modifier) {
        Button(
            onClick = { mediaPlayer.start() },
            // 将颜色配置传入Button的colors参数，设置白色背景
            colors = ButtonDefaults.buttonColors(
                containerColor = Color.White,
                contentColor = Color.Black // 可选：设置图标颜色，避免与白色背景冲突
            ),
            // 可选：移除按钮默认阴影，让样式更简洁
            elevation = ButtonDefaults.buttonElevation(defaultElevation = 0.dp)
        ) {
            Image(
                painter = painterResource(R.drawable.play),
                contentDescription = "播放"
            )
        }
    }
}

关键修改说明： #

• 修正颜色配置位置：ButtonDefaults.buttonColors需要传入Button的colors参数，而不是放在Button的内容区域内，这样才能正确覆盖默认的紫色背景。
• 规范MediaPlayer管理：用remember缓存播放器实例，避免重组重复创建；用DisposableEffect在组件销毁时释放资源，避免内存泄漏。
• 可选样式优化：通过contentColor调整图标颜色，或通过elevation移除阴影，让按钮样式更贴合需求。

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