Jetpack Compose的Material3的ColorScheme

所属分类:Android | 发布于 2023-05-08 18:51:25

谷歌官方推荐使用Material Design来设计android app,因此推出了Material工具包,最新的是Material3,Jetpack Compose可以方便的和Material3相结合。

Material3也提供了多种功能特性,其中一个就是动态主题和暗黑模式,不过暂时不止动态主题没玩明白,连基本的颜色搭配也没玩明白。

这里记录一下。

1、ColorScheme的定义

class ColorScheme(
    primary: Color,
    onPrimary: Color,
    primaryContainer: Color,
    onPrimaryContainer: Color,
    inversePrimary: Color,
    secondary: Color,
    onSecondary: Color,
    secondaryContainer: Color,
    onSecondaryContainer: Color,
    tertiary: Color,
    onTertiary: Color,
    tertiaryContainer: Color,
    onTertiaryContainer: Color,
    background: Color,
    onBackground: Color,
    surface: Color,
    onSurface: Color,
    surfaceVariant: Color,
    onSurfaceVariant: Color,
    surfaceTint: Color,
    inverseSurface: Color,
    inverseOnSurface: Color,
    error: Color,
    onError: Color,
    errorContainer: Color,
    onErrorContainer: Color,
    outline: Color,
    outlineVariant: Color,
    scrim: Color,
) {

}

从这里可以看到有哪些颜色可以定义。

2、颜色页面表示

3、Color自定义

在ui/theme/Color.kt文件中可以定义颜色

val Purple80 = Color(0xFFD0BCFF)
val PurpleGrey80 = Color(0xFFCCC2DC)
val Pink80 = Color(0xFFEFB8C8)

val Purple40 = Color(0xFF6650a4)
val PurpleGrey40 = Color(0xFF625b71)
val Pink40 = Color(0xFF7D5260)

4、Theme自定义

在ui/theme/Theme.kt文件中可以自定义主题。

比如自定义浅色主题,可以有以下选项

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
//    background = Color(0xFFF1F0EC)

    /* Other default colors to override
    background = Color(0xFFFFFBFE),
    surface = Color(0xFFFFFBFE),
    onPrimary = Color.White,
    onSecondary = Color.White,
    onTertiary = Color.White,
    onBackground = Color(0xFF1C1B1F),
    onSurface = Color(0xFF1C1B1F),
    */
)

文哥博客(https://wenge365.com)属于文野个人博客,欢迎浏览使用

联系方式:qq:52292959 邮箱:52292959@qq.com

备案号:粤ICP备18108585号 友情链接