Jetpack Compose中按钮的背景颜色

Question

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

我想不通为什么我不能在Button上使用背景颜色。

我遵循了Compose布局codelabs的指导。
在backgroundColor和Image()中存在问题。

- shotmeinthehead

---

PS：我也是Stack Overflow的新手。所以，请告诉我我做错了什么 :) - shotmeinthehead

Answer 1

使用1.0.0-alpha09到alpha11版本可用的ButtonDefaults

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

NEW VERSION

In 1.0.0-alpha7, the backgroundColor property no longer works for Button. Use the following instead.

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

- Elye

---

我的直觉告诉我Modifier.background(Color)应该可以用在这里，但是Google有其他的计划... - kc_dev

为什么不使用“Modifier”来设置颜色？ - IgorGanapolsky

你将如何使用androidTest验证后台？ - Anshul Tyagi

Answer 2

背景颜色由使用ButtonDefaults.buttonColors函数的colors参数定义。

使用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)
)

- Gabriele Mariotti

---

如何将 onClick 传递到另一个屏幕？ - shotmeinthehead

例如，@FadelFarinsqi 可以像在 Android 中普通的 Activity 一样使用 startActivity(intent)。 - Gabriele Mariotti

M2和M3是什么？ - undefined

@StevenLee 材料设计 - undefined

Answer 3

ButtonConstants.defaultButtonColor在1.0.0-alpha09已被弃用，请使用：

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

更新版本1.3.0：

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

- Oussema Aroua

---

1.3.3 版本中没有 'containerColor'。 - skafle

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")
        }
    }

- Bolt UIX

Answer 5

ButtonDefaults.buttonColors 函数返回一个 ButtonColors 对象，而不是布尔值。因此，您需要将返回的 ButtonColors 对象传递给 Button 组合中的 colors 参数。

以下是如何使用 ButtonDefaults.buttonColors 来设置 Button 的背景颜色的示例：

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

这段代码将按钮的背景颜色设置为#CA1212，并在按钮中显示文本Compose。请注意，您需要导入androidx.compose.material.Button和androidx.compose.material.ButtonDefaults才能使用此代码。

- Karan M

Answer 6

步骤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

Material 3 case:

    Color.Red change MaterialTheme.colorScheme.tertiaryContainer

- Fortran

Answer 7

背景颜色由colors参数使用ButtonDefaults.buttonColors函数定义。

例如。

Button(
    onClick = { /* click */ },
    colors = ButtonDefaults.elevatedButtonColors(
                containerColor = Color.White,
                contentColor = Color.Red
            )
) {
    /* Your code */
}

请参考androidx.compose.material3.Button的buttonColors组合这里

- Hitesh K

---

这是Material 3的唯一选项，而且这个答案被低估了。如果在按钮或轮廓按钮上使用M3，背景参数是不存在的。 - undefined

Answer 8

自定义颜色

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

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

• backgroundColor = Color(red = 255, green = 169, blue = 0) 是我们如何将按钮的背景颜色更改为自定义颜色

- Tristan Elliott

Answer 9

你可以使用预先创建的颜色，也可以使用颜色的RGB值来创建自己的颜色。ContentColor是按钮文本的颜色，containerColor是按钮的背景颜色。

    Button(onClick = { },
    colors = ButtonDefaults.buttonColors
             (contentColor = Color.Black,   //pre-created colour
              containerColor = Color(255,255,157)))  // custom colour

- Siriana