Jetpack Compose – 为什么 buttonColors 不生效？答案

【问题标题】：Jetpack Compose – Why aren't buttonColors taking effect?Jetpack Compose – 为什么 buttonColors 不生效？
【发布时间】：2022-01-19 12:03:24
【问题描述】：

我已经定义了我的可组合按钮，如下所示：

@Composable
fun PrimaryButton(modifier: Modifier = Modifier, onClick: Callback, content: @Composable RowScope.() -> Unit) {
    val buttonColors = ButtonDefaults.buttonColors(
        backgroundColor = MaterialTheme.colors.primary,
        contentColor = contentColorFor(backgroundColor = MaterialTheme.colors.primary)
    )
    Button(modifier=modifier, onClick = onClick, content=content, colors=buttonColors)
}

我已经检查了调试器，contentColorFor 返回了合适的颜色（白色）（0xFFFFFFFF）

但我无法将按钮上的文本设为白色。

这是预览

@Preview(name="Buttons")
@Composable
fun PrimaryButtonPreview() {
    MyAppTheme {
        Row {
            PrimaryButton(modifier = Modifier, onClick={}) {
                Text(text = "Sample")
            }
        }
    }
}

结果：

设置button = TextStyle(…) 会导致文本颜色发生变化，但我想从按钮颜色设置它，而不是为文本设置一种唯一颜色

编辑

将按钮的文本样式颜色设置为未指定后，它仍然不起作用：

形状是 Android Studio 项目生成器的默认设置

颜色

val mainBrown = Color(0xFFB4A996)
val primaryBrown = Color(0xFFC2A686)
val clearBrown = Color(0xFFAE967A)
val white = Color.White
val smokeWhite = Color(0xFFF3F3F3)
val gray = Color(0xFF9AA5AF)
val lightGray =Color(0xFFF1F1EF)
val darkGray = Color(0xFF4D5151)
val black = Color(0xFF4D4646)

val red = Color(248,113,113)

主题

private val LightColorPalette = darkColors(
    primary = primaryBrown,
    onPrimary = white,
    primaryVariant = primaryBrown, 

    secondary = white,
    onSecondary = primaryBrown,
    secondaryVariant = white, 
    background = darkGray,

    surface = lightGray,
    onSurface = black,

    error = red,
    onError = smokeWhite,
)

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {

    MaterialTheme(
        colors = LightColorPalette,
        typography = typography,
        shapes = Shapes,
        content = content
    )
}

排版

val typography = Typography(
    h1 = TextStyle(
        color = mainBrown,
        fontWeight = FontWeight.W700,
        fontSize = 1.5f.rem,
        lineHeight = 2.rem,
    ),
    h2 = TextStyle(
        color = mainBrown,
        fontWeight = FontWeight.W500,
        fontSize = 1.25f.rem,
        lineHeight = 1.75f.rem
    ),
    h3 = TextStyle(
        color = mainBrown,
        fontWeight = FontWeight.Normal,
        fontSize = 1.5f.rem,
        lineHeight = 2.rem
    ),
    h4 = TextStyle(
        color = mainBrown,
        fontWeight = FontWeight.Normal,
        fontSize = 1.25f.rem,
        lineHeight = 1.75f.rem
    ),
    body1 = TextStyle(
        color = black,
        fontSize = 1.rem,
        lineHeight = 1.25f.rem
    ),
    button = TextStyle(
        fontSize = 1.rem,
        color = Color.Unspecified,
        lineHeight = 1.25f.rem
    ),
    defaultFontFamily = ralewayRegular
)

【问题讨论】：

你试过手动传递Color.White吗？实际运行的结果是一样的吗？
是的，使用Color.White 作为contentColor 参数会产生相同的结果；在文本上手动设置颜色会有所不同。但对我来说，我好像在某种程度上错过了ButtonColors
MaterialTheme.typography.button 优先于 ButtonColors。如果您从中删除显式颜色，并使用默认的Color.Unspecified，这将起作用
这是我所拥有的（未指定的排版），但它不起作用
我在源代码中找不到任何其他原因，也没有重现问题。请将您的代码更新为minimum reproducible example。

标签： android kotlin android-jetpack-compose

【解决方案1】：

我的设置很好，除了排版。

我每次都在设置颜色，以便从MaterialTheme 接管它的外观。

不要设置这些值，让框架为您处理。

不工作，因为我设置（并强制）mainBrown 作为颜色

val typography = Typography(
    h1 = TextStyle(
        color = mainBrown,
        fontWeight = FontWeight.W700,
        fontSize = 1.5f.rem,
        lineHeight = 2.rem,
    ),
    h2 = TextStyle(
        color = mainBrown,
        fontWeight = FontWeight.W500,
        fontSize = 1.25f.rem,
        lineHeight = 1.75f.rem
    ),
    h3 = TextStyle(
        color = mainBrown,
        fontWeight = FontWeight.Normal,
        fontSize = 1.5f.rem,
        lineHeight = 2.rem
    ),
    h4 = TextStyle(
        color = mainBrown,
        fontWeight = FontWeight.Normal,
        fontSize = 1.25f.rem,
        lineHeight = 1.75f.rem
    ),
    body1 = TextStyle(
        color = black,
        fontSize = 1.rem,
        lineHeight = 1.25f.rem
    ),
    button = TextStyle(
        fontSize = 1.rem,
        color = Color.Unspecified,
        lineHeight = 1.25f.rem
    ),
    defaultFontFamily = ralewayRegular
)

工作

val typography = Typography(
    h1 = TextStyle(
        fontWeight = FontWeight.W700,
        fontSize = 1.5f.rem,
        lineHeight = 2.rem,
    ),
    h2 = TextStyle(
        fontWeight = FontWeight.W500,
        fontSize = 1.25f.rem,
        lineHeight = 1.75f.rem
    ),
    h3 = TextStyle(
        fontWeight = FontWeight.Normal,
        fontSize = 1.5f.rem,
        lineHeight = 2.rem
    ),
    h4 = TextStyle(
        fontWeight = FontWeight.Normal,
        fontSize = 1.25f.rem,
        lineHeight = 1.75f.rem
    ),
    body1 = TextStyle(
        fontSize = 1.rem,
        lineHeight = 1.25f.rem
    ),
    button = TextStyle(
        
        fontSize = 1.rem,
        color = Color.Unspecified,
        lineHeight = 1.25f.rem
    ),
    defaultFontFamily = ralewayRegular
)

【讨论】：