佩戴 OS 按钮背景

Question

        Button(
            onClick = {
                raceOn = !raceOn
                if (raceOn) {
                    text.value = "Stop!"
                    color.value = Color.Red
                } else {
                    text.value = "Go!"
                    color.value = Color.Green
                }
            },

            modifier = Modifier.background(color = color.value),

            content = {
                Text(
                    text = "${text.value}",
                )
            }
        )

使用上面的代码，我得到了附加的图像。我想要的是按钮内部是绿色的，而不是它后面的背景。我无法正确属性修改

这里有人试过修改Button背景吗？或者也许建议另一种解决方案。我尝试了 OutlinedButton 但没有成功。

谢谢！

Answer 1

使用 MaterialTheme ButtonColors。

            val colors: ButtonColors = ButtonDefaults.primaryButtonColors(backgroundColor = Color.Red)
            Button(onClick = { /*TODO*/ }, colors = ButtonDefaults.primaryButtonColors()) {
              // TODO
            }

您也可以通过设置 MaterialTheme 默认值来更新。

val wearColorPalette: Colors = Colors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
    secondaryVariant = Teal200,
    error = Red400,
    onPrimary = Color.Black,
    onSecondary = Color.Black,
    onError = Color.Black
)

...


    MaterialTheme(
        colors = wearColorPalette,
        typography = Typography,
        // For shapes, we generally recommend using the default Material Wear shapes which are
        // optimized for round and non-round devices.
        content = content
    )

佩戴 OS 按钮背景

Wear OS Button Background

wear-os