Jetpack Compose中的Material3主题提供了不同的颜色。

huangapple go评论85阅读模式
英文:

Material3 theme in jetpack compose gives different color

问题

我只在代码部分提供翻译,如下:

我刚刚在Jetpack Compose中使用Material 3创建了一个新项目。我在项目中没有进行任何更改。

只是在Theme.kt文件中,我添加了背景色:

private val DarkColorScheme = darkColorScheme(
    primary = Color.Red,
    secondary = Color.White,
    background = Color(0xFF5CB15A)
)

private val LightColorScheme = lightColorScheme(
    primary = Color.Red,
    secondary = Color.Black,
    background = Color(0xFF5CB15A)
)

现在当我在我的组合文件中使用它时:

TextButton(modifier = Modifier
                            .background(
                                color = MaterialTheme.colorScheme.background,
                                shape = RoundedCornerShape(10.dp)
                            ).....
我得到完全不同的颜色。为什么会这样?

MainActivity.kt文件内容:

MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            val navController = rememberNavController()

            PetCareComposeTheme {
                GetStarted()
            }
        }
    }
}
英文:

I just created a new project in jetpack compose with material 3. I did not change anything in the project.

Just in Theme.kt file i added background

private val DarkColorScheme = darkColorScheme(
    primary = Color.Red,
    secondary = Color.White,
    background = Color(0xFF5CB15A)
)

private val LightColorScheme = lightColorScheme(
    primary = Color.Red,
    secondary = Color.Black,
    background = Color(0xFF5CB15A)

)

Now when i use it in my composable file

TextButton(modifier = Modifier
                            .background(
                                color = MaterialTheme.colorScheme.background,
                                shape = RoundedCornerShape(10.dp)
                            ).....

I get completely different color. Why is that?

MainActivity.kt

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        WindowCompat.setDecorFitsSystemWindows(window, false)

        setContent {
            val navController = rememberNavController()

            PetCareComposeTheme {
                GetStarted()
            }
        }
    }
}

答案1

得分: 3

在Material 3中,默认启用了动态颜色。尝试禁用它。

@Composable
fun PetCareTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // 动态颜色在Android 12+上可用
    dynamicColor: Boolean = false, // 将其更改为false以默认禁用
    content: @Composable () -> Unit
) {
    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 view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

动态颜色概述:https://m3.material.io/styles/color/dynamic-color/overview

英文:

In Material 3, dynamic color is enabled by default. Try disabling it.

@Composable
fun PetCareTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    // Dynamic color is available on Android 12+
    dynamicColor: Boolean = false, // change to false to disable by default
    content: @Composable () -> Unit
) {
    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 view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

Dynamic color overview : https://m3.material.io/styles/color/dynamic-color/overview

huangapple
  • 本文由 发表于 2023年7月24日 19:11:00
  • 转载请务必保留本文链接:https://go.coder-hub.com/76753884.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定