Android Compose 三：切换主题

1 先瞅瞅lightColorScheme / darkColorScheme

创建项目后 自带一个Theme.kt
判断了 使用哪个ColorScheme

下面看看LightColorScheme （亮/暗主题差不多，就是颜色不一样罢了）

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40

    /* 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),
    */
)

ctrl+左键点

fun lightColorScheme(
    primary: Color = ColorLightTokens.Primary,
    onPrimary: Color = ColorLightTokens.OnPrimary,
    primaryContainer: Color = ColorLightTokens.PrimaryContainer,
    onPrimaryContainer: Color = ColorLightTokens.OnPrimaryContainer,
    inversePrimary: Color = ColorLightTokens.InversePrimary,
    secondary: Color = ColorLightTokens.Secondary,
    onSecondary: Color = ColorLightTokens.OnSecondary,
    secondaryContainer: Color = ColorLightTokens.SecondaryContainer,
    onSecondaryContainer: Color = ColorLightTokens.OnSecondaryContainer,
    tertiary: Color = ColorLightTokens.Tertiary,
    onTertiary: Color = ColorLightTokens.OnTertiary,
    tertiaryContainer: Color = ColorLightTokens.TertiaryContainer,
    onTertiaryContainer: Color = ColorLightTokens.OnTertiaryContainer,
    background: Color = ColorLightTokens.Background,
    onBackground: Color = ColorLightTokens.OnBackground,
    surface: Color = ColorLightTokens.Surface,
    onSurface: Color = ColorLightTokens.OnSurface,
    surfaceVariant: Color = ColorLightTokens.SurfaceVariant,
    onSurfaceVariant: Color = ColorLightTokens.OnSurfaceVariant,
    surfaceTint: Color = primary,
    inverseSurface: Color = ColorLightTokens.InverseSurface,
    inverseOnSurface: Color = ColorLightTokens.InverseOnSurface,
    error: Color = ColorLightTokens.Error,
    onError: Color = ColorLightTokens.OnError,
    errorContainer: Color = ColorLightTokens.ErrorContainer,
    onErrorContainer: Color = ColorLightTokens.OnErrorContainer,
    outline: Color = ColorLightTokens.Outline,
    outlineVariant: Color = ColorLightTokens.OutlineVariant,
    scrim: Color = ColorLightTokens.Scrim,
): ColorScheme =
    ColorScheme(
        primary = primary,
        onPrimary = onPrimary,
        primaryContainer = primaryContainer,
        onPrimaryContainer = onPrimaryContainer,
        inversePrimary = inversePrimary,
        secondary = secondary,
        onSecondary = onSecondary,
        secondaryContainer = secondaryContainer,
        onSecondaryContainer = onSecondaryContainer,
        tertiary = tertiary,
        onTertiary = onTertiary,
        tertiaryContainer = tertiaryContainer,
        onTertiaryContainer = onTertiaryContainer,
        background = background,
        onBackground = onBackground,
        surface = surface,
        onSurface = onSurface,
        surfaceVariant = surfaceVariant,
        onSurfaceVariant = onSurfaceVariant,
        surfaceTint = surfaceTint,
        inverseSurface = inverseSurface,
        inverseOnSurface = inverseOnSurface,
        error = error,
        onError = onError,
        errorContainer = errorContainer,
        onErrorContainer = onErrorContainer,
        outline = outline,
        outlineVariant = outlineVariant,
        scrim = scrim,
    )

也就是看ColorScheme就可以了

• 它定义了一堆颜色
• 具体每个参数代表何种处理，影响到什么组件 自行搜索即可

@Stable
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,
) 

乱改一下主题

我们比猫花虎 复制一个LightColorScheme 定义redColorScheme

• 我还是习惯变量，属性，方法名 小写开头的驼峰格式啊，┗|｀O′|┛ 嗷~~

//蓝色主题
val main_color = Color(0xFFFF0000)  //给个红红火火  这必须加透明度 好像默认的是全透明不加的话

private val redColorScheme = lightColorScheme(
    primary = main_color,
    secondary = main_color,
    background = main_color
)

然后 将 colorScheme = redColorScheme

//    val colorScheme = when {
//        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
//            val context = LocalContext.current
//            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
//        }
//
//        darkTheme -> DarkColorScheme
//        else -> LightColorScheme
//    }

    val colorScheme = redColorScheme

状态栏颜色我们也是用主题色

window.statusBarColor = colorScheme.primary.toArgb()

效果如下

实现主题切换功能

• 使用mutableStateOf 标记属性状态变化时重新绘制

 override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val themeType = remember {
                mutableStateOf(0)
            }
            MyApplicationTheme(
                themeType = themeType.value   //使用动态的值
            ) {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background,
                ) {
                    Greeting("Android",themeType)
                }
            }
        }
    }

@Composable
fun Greeting(name: String, themeType: MutableState<Int>, ) {
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "红色",
            modifier = Modifier
                .weight(1f)
                .padding(20.dp)
                .background(red_color)
                .clickable {   
                    themeType.value = 0   //点击变化主题
                }
        )

        Text(
            text = "绿色",
            modifier = Modifier
                .weight(1f)
                .padding(20.dp)
                .background(green_color)
                .clickable {
                    themeType.value = 1  //点击变化主题
                }
        )

        Text(
            text = "蓝色",
            modifier = Modifier
                .weight(1f)
                .padding(20.dp)
                .background(blue_color)
                .clickable {
                    themeType.value = 2 //点击变化主题
                }
        )
    }
}

效果如下

思考 添加上更多的参数，是否就可以实现 文字大小变化，图像大小变化，等更多的设置内容呢？