Material Theme Colors 导致空白 Jetpack Compose 按钮答案

【问题标题】：Material Theme Colors results in blank Jetpack Compose ButtonMaterial Theme Colors 导致空白 Jetpack Compose 按钮
【发布时间】：2021-03-07 20:12:27
【问题描述】：

使用默认 Material Theme 颜色（下面的代码）的简单组合会生成以下预览图像（在 IDE 和设备上）

@Preview
@Composable
fun PreviewCalendar() {
  MaterialTheme {
    Column{
      Row{Text("Hello World")}
      Row{Button(onClick = {}){Text("Hello World Button")} }
    }
  }
}

当提供我自己的颜色时，按钮变为空白（代码和屏幕截图如下）。阅读Button 的源代码，我原以为按钮的背景颜色为primary。我是否错误地实现了我的颜色？我找不到类似行为的错误报告

val lightTheme = 
  Colors(
    primary = Color(0x0d47a1),
    primaryVariant = Color(0x5472d3),
    secondary = Color(0x212121),
    secondaryVariant = Color(0x484848),
    background = Color(0xffffff),
    surface = Color(0xffffff),
    error = Color(0xB00020),
    onPrimary = Color(0xffffff),
    onSecondary = Color(0xffffff),
    onBackground = Color(0x000000),
    onSurface = Color(0x000000),
    onError = Color(0xffffff),
    isLight = true
  )

@Preview
@Composable
fun PreviewCalendar() {
  MaterialTheme(colors = lightTheme) {
    Column{
      Row{Text("Hello World")}
      Row{Button(onClick = {}){Text("Hello World Button")} }
    }
  }
}

【问题讨论】：

标签： android material-design android-jetpack android-jetpack-compose

【解决方案1】：

我使用 google 的材质主题工具生成了这些颜色，但没有注意到 Compose 正在寻找 ARGB 颜色空间。我指定的所有颜色的 alpha 值为 0，因此是透明的。正确的颜色是：

val lightTheme = 
  Colors(
    primary = Color(0xFF0d47a1),
    primaryVariant = Color(0xFF5472d3),
    secondary = Color(0xFF212121),
    secondaryVariant = Color(0xFF484848),
    background = Color(0xFFffffff),
    surface = Color(0xFFffffff),
    error = Color(0xFFB00020),
    onPrimary = Color(0xFFffffff),
    onSecondary = Color(0xFFffffff),
    onBackground = Color(0xFF000000),
    onSurface = Color(0xFF000000),
    onError = Color(0xFFffffff),
    isLight = true
  )

【讨论】：