如何在Jetpack Compose中匹配主题和图标的颜色属性？ [英] How to match color attributes between theme and icon in Jetpack Compose?

问题描述

我有一个矢量可绘制的，它有两个路径，具有引用不同主题颜色的不同属性。

并且这些属性的值被不同的主题更改，如何在Jetpack Compose中实现相同的值？

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="82dp"
    android:height="96dp"
    android:viewportWidth="82"
    android:viewportHeight="96">
  <path
      android:pathData="M0.2887,4.6197C0.2887,2.2278 2.2278,0.2887 4.6197,0.2887H77.3803C79.7722,0.2887 81.7113,2.2278 81.7113,4.6197V91.2394C81.7113,93.6314 79.7722,95.5704 77.3803,95.5704H4.6197C2.2278,95.5704 0.2887,93.6314 0.2887,91.2394V4.6197Z"
      android:fillColor="?attr/colorPrimary" />
  <path
      android:pathData="M4.043,4.0422h73.9155v73.9155h-73.9155z"
      android:fillColor="?attr/colorSecondary"/>
</vector>

以不同主题的style es.xml为例

<style name="RedTheme" parent="GlobalTheme">
    <item name="colorPrimary">@color/red</item>
    <item name="colorSecondary">@color/redDark</item>
    ...
</style>

<style name="GreenTheme" parent="GlobalTheme">
    <item name="colorPrimary">@color/green</item>
    <item name="colorSecondary">@color/greenDark</item>
    ...
</style>

根据当前使用的主题，可绘制矢量或图标可以有不同的颜色

推荐答案

首先定义颜色：

import androidx.compose.ui.graphics.Color
val white = Color(0xFFFFFFFF)
val black = Color(0xFF000000)
...

定义属性：

class GlobalThemeData(colorPrimary: Color ...){
    var colorPrimary by mutableStateOf(colorPrimary)
    ...
}

定义主题：

val LightColorPalette = GlobalThemeData(colorPrimary = white)

val DarkColorPalette = GlobalThemeData(colorPrimary = black)

...

object GlobalTheme {
    val colors: GlobalThemeData
        @Composable
        get() = LightColorPalette

    enum class Theme {
        Light, Dark ...
    }
}

定义compostionLocal和GlobalTheme

private val LocalGlobalColors = compositionLocalOf {
    LightColorPalette
}

@Composable
fun GlobalTheme(theme: GlobalTheme.Theme = GlobalTheme.Theme.Light,
                content: @Composable () -> Unit) {
    val targetColors =
        when(theme){
            GlobalTheme.Theme.Dark -> DarkColorPalette
            GlobalTheme.Theme.Light -> LightColorPalette
            GlobalTheme.Theme.Red -> RedColorPalette
            GlobalTheme.Theme.Green -> GreenColorPalette
        }
    CompositionLocalProvider(LocalGlobalColors provides targetColors) {
        MaterialTheme(
            shapes = Shapes,
            typography = Typography,
            content = content
        )
    }
}

示例：

val white = Color(0xFFFFFFFF)
val black = Color(0xFF000000)
val red = Color(0xFFC51614)
val green = Color(0xFF67BF63)

val LightColorPalette = GlobalThemeData(colorPrimary = white)

val DarkColorPalette = GlobalThemeData(colorPrimary = black)

val RedColorPalette = GlobalThemeData(colorPrimary = red)

val GreenColorPalette = GlobalThemeData(colorPrimary = green)

object GlobalTheme {
    val colors: GlobalThemeData
        @Composable
        get() = LocalGlobalColors.current

    enum class Theme {
        Light, Dark,Red,Green
    }
}

class GlobalThemeData(colorPrimary: Color){
    var colorPrimary by mutableStateOf(colorPrimary)
}

private val LocalGlobalColors = compositionLocalOf {
    LightColorPalette
}

@Composable
fun GlobalTheme(theme: GlobalTheme.Theme = GlobalTheme.Theme.Light,
                content: @Composable () -> Unit) {
    val targetColors =
        when(theme){
            GlobalTheme.Theme.Dark -> DarkColorPalette
            GlobalTheme.Theme.Light -> LightColorPalette
            GlobalTheme.Theme.Red -> RedColorPalette
            GlobalTheme.Theme.Green -> GreenColorPalette
        }
    CompositionLocalProvider(LocalGlobalColors provides targetColors) {
        MaterialTheme(
            shapes = Shapes,
            typography = Typography,
            content = content
        )
    }
}

setContent {
    var theme by remember{mutableStateOf(GlobalTheme.Theme.Dark)}
    GlobalTheme(theme) {
        Column() {
            Icon(Icons.Default.Lock,
                modifier = Modifier.size(48.dp),
                contentDescription = "",
                tint = GlobalTheme.colors.colorPrimary)
            Button(onClick = {
                theme = when(theme){
                    GlobalTheme.Theme.Dark -> GlobalTheme.Theme.Red
                    GlobalTheme.Theme.Light -> GlobalTheme.Theme.Dark
                    GlobalTheme.Theme.Red -> GlobalTheme.Theme.Green
                    GlobalTheme.Theme.Green -> GlobalTheme.Theme.Light
                }
            }) {
                Text(text = "Change",color = GlobalTheme.colors.colorPrimary)
            }
        }

    }
}

这篇关于如何在Jetpack Compose中匹配主题和图标的颜色属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！