Jetpack Compose 中按钮的背景颜色

Question

Button(backgroundColor = Color.Yellow) {
    Row {
        Image(asset = image)
        Spacer(4.dp)
        Text("Button")
    }
}

我不明白为什么我不能在

Button

上使用背景色。

我遵循了 Compose Layout 代码实验室。

backgroundColor

和 Image() 中的资产存在问题。

Answer 1

使用

ButtonDefaults

1.0.0-alpha09 到 alpha11

Button(
   onClick = {},
   colors = ButtonDefaults.buttonColors(backgroundColor = Color.Yellow)
) {
   /**/
}

旧版本

backgroundColor

的

Button

不再适用于

1.0.0-alpha7

改用下面的

Button(
   onClick = {},
   colors = ButtonConstants.defaultButtonColors(backgroundColor = Color.Yellow)
) {
   /**/
}

Answer 2

背景颜色由

colors

参数使用

ButtonDefaults.buttonColors

函数定义。

使用 M2 您可以指定

backgroundColor

值：

Button(
     onClick = {  },
     colors = ButtonDefaults.buttonColors(
          backgroundColor = Color.White,
          contentColor = Color.Red)
)

使用 M3 您可以指定

containerColor

值：

Button(
    onClick = {  },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.White,
        contentColor = Color.Red)
)

Answer 3

ButtonConstants.defaultButtonColor

在

1.0.0-alpha09

使用时已弃用：

 colors = ButtonDefaults.buttonColors(backgroundColor = Color.Yellow)

更新版本 1.3.0 :

colors = ButtonDefaults.buttonColors(containerColor = Color.Yellow),

Answer 4

撰写背景按钮颜色 创建一个变量 mainButtonColor 并定义背景颜色和内容颜色

implementation 'androidx.compose.material3:material3:1.0.0-alpha02'

    val mainButtonColor = ButtonDefaults.buttonColors(
        containerColor = androidx.compose.ui.graphics.Color.Red,
        contentColor = MaterialTheme.colorScheme.surface
    )

    Row {
        Button(colors = mainButtonColor, onClick = {}, modifier = Modifier.padding(8.dp)) {
            Text(text = "Custom colors")
        }
    }

Answer 5

第 1 步：简单设置背景：

    Button(
        colors = buttonColors(Color.Red),
        onClick = {}
    ) {
        Text(text = "Login")
    }

全套颜色：

        Button(
            colors = ButtonDefaults.buttonColors(
                backgroundColor = Color.Red,
                contentColor = Color.Green,
                disabledBackgroundColor = Color.Yellow,
                disabledContentColor = Color.Magenta
            ),
            onClick = {}
        ) {
            Text(text = "Login")
        }

第 2 步（可选）：但这是最佳实践

材料2案例：

    Color.Red change MaterialTheme.colors.primary

材料3案例：

    Color.Red change MaterialTheme.colorScheme.tertiaryContainer

Answer 6

自定义颜色

• 要创建自定义颜色，您需要该颜色的 RGB 值。

         Button(
            onClick = {  },
            colors = ButtonDefaults.buttonColors(
                    backgroundColor = Color(red = 255, green = 169, blue = 0)
                )
            ) {}

• backgroundColor = Color(red = 255, green = 169, blue = 0)

  是我们如何将按钮的背景颜色更改为自定义颜色

Answer 7

ButtonDefaults.buttonColors

函数返回一个

ButtonColors

对象，而不是布尔值。因此，您需要将返回的

ButtonColors

对象传递给 Button 可组合项的 colors 参数。

以下是如何使用

ButtonDefaults.buttonColors

设置按钮背景颜色的示例：

    Button(
        onClick = { /* Do something */ },
        colors = ButtonDefaults.buttonColors(backgroundColor = Color(0xFFCA1212))
    ) {
        Text("Compose")
    }

此代码将按钮的背景颜色设置为

#CA1212

，并在按钮中显示文本

Compose

。请注意，您需要导入

androidx.compose.material.Button

和

androidx.compose.material.ButtonDefaults

才能使用此代码。