Compose的主题Theme(十)

一、前言

​ 在Android可以对整个应用的风格进行管理，这种风格叫做主题。通过主题对整个应用的字体、颜色、大小、形状进行管理可以使整个应用变得容易维护。不过这个需要开发者提前知道整个应用的规范，而且以后都按照这个规范来进行开发。不过在我从事的开发过程中，整个开发过程往往显的比较随意，其风格也经常变化，因此主题实际使用场景并不大。本篇就对此进行一个简单的记录。

二、Material Theming

​ Jetpack Compose 提供了Material Design的实现MaterialTheme ——一个用于创建数字界面的综合设计系统。

​ 对于MaterialTheme的简单使用如下

@Composable
private fun theme(){

    val lightColors = lightColors(
        primary = Color(0xFF1EB980)
    )

    val darkColors = darkColors(
        primary = Color(0xFF66ffc7)
    )

    val colors = if (isSystemInDarkTheme()) darkColors else lightColors

    val typography = Typography(
        h1 = TextStyle(
            fontWeight = FontWeight.W100,
            fontSize = 96.sp
        ),
        button = TextStyle(
            fontWeight = FontWeight.W600,
            fontSize = 14.sp
        )
    )

    MaterialTheme(colors = colors, typography = typography) {
        val currentTheme = if (MaterialTheme.colors.isLight) "light" else "dark"
        ExtendedFloatingActionButton(
            text = { Text("FAB with text style and color from $currentTheme theme") },
            onClick = {}
        )
    }
}

二、自定义属性主题

如果系统默认主题不能满足需求时候可以自己配置主题

private val DarkColors = darkColors(
    primary = Color.Cyan,
    primaryVariant = Color.Cyan,
    secondary = Color.Cyan
)

private val LightColors = lightColors(
    primary = Color.Magenta,
    primaryVariant = Color.Magenta,
    secondary = Color.Magenta
)

@Composable
fun BasicsCodelabTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColors
    } else {
        LightColors
    }

    MaterialTheme(colors = colors) {
        content()
    }
}

如果涉及到一键换肤的功能，可以使用状态的机制来修改整个应用的主题。

三、参考链接

1. Theme的codelabs资源

   https://developer.android.google.cn/codelabs/jetpack-compose-theming#3

2. MaterialTheme的类说明

   https://developer.android.google.cn/reference/kotlin/androidx/compose/material/package-summary#MaterialTheme(androidx.compose.material.Colors,androidx.compose.material.Typography,androidx.compose.material.Shapes,kotlin.Function0)

3. 主题化你的应用

   https://developer.android.google.cn/codelabs/jetpack-compose-basics#7

4. 主题

   https://developer.android.google.cn/jetpack/compose/themes