时间戳

首页 > 解决方案 > Material Theme Colors 导致空白 Jetpack Compose 按钮

android - Material Theme Colors 导致空白 Jetpack Compose 按钮

问题描述

使用默认材质主题颜色（下面的代码）的简单组合会生成以下预览图像（在 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")} }
    }
  }
}

材质主题的自定义颜色

标签： androidmaterial-designandroid-jetpackandroid-jetpack-compose

解决方案

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

推荐阅读