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

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

Material3 theme in jetpack compose gives different color

问题

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

  1. 我刚刚在Jetpack Compose中使用Material 3创建了一个新项目。我在项目中没有进行任何更改。
  2. 只是在Theme.kt文件中,我添加了背景色:
  3. private val DarkColorScheme = darkColorScheme(
  4. primary = Color.Red,
  5. secondary = Color.White,
  6. background = Color(0xFF5CB15A)
  7. )
  8. private val LightColorScheme = lightColorScheme(
  9. primary = Color.Red,
  10. secondary = Color.Black,
  11. background = Color(0xFF5CB15A)
  12. )
  13. 现在当我在我的组合文件中使用它时:
  14. TextButton(modifier = Modifier
  15. .background(
  16. color = MaterialTheme.colorScheme.background,
  17. shape = RoundedCornerShape(10.dp)
  18. ).....
  19. 我得到完全不同的颜色。为什么会这样?

MainActivity.kt文件内容:

  1. MainActivity.kt
  2. class MainActivity : ComponentActivity() {
  3. override fun onCreate(savedInstanceState: Bundle?) {
  4. super.onCreate(savedInstanceState)
  5. WindowCompat.setDecorFitsSystemWindows(window, false)
  6. setContent {
  7. val navController = rememberNavController()
  8. PetCareComposeTheme {
  9. GetStarted()
  10. }
  11. }
  12. }
  13. }
英文:

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

  1. private val DarkColorScheme = darkColorScheme(
  2. primary = Color.Red,
  3. secondary = Color.White,
  4. background = Color(0xFF5CB15A)
  5. )
  6. private val LightColorScheme = lightColorScheme(
  7. primary = Color.Red,
  8. secondary = Color.Black,
  9. background = Color(0xFF5CB15A)
  10. )

Now when i use it in my composable file

  1. TextButton(modifier = Modifier
  2. .background(
  3. color = MaterialTheme.colorScheme.background,
  4. shape = RoundedCornerShape(10.dp)
  5. ).....

I get completely different color. Why is that?

  1. MainActivity.kt
  2. class MainActivity : ComponentActivity() {
  3. override fun onCreate(savedInstanceState: Bundle?) {
  4. super.onCreate(savedInstanceState)
  5. WindowCompat.setDecorFitsSystemWindows(window, false)
  6. setContent {
  7. val navController = rememberNavController()
  8. PetCareComposeTheme {
  9. GetStarted()
  10. }
  11. }
  12. }
  13. }

答案1

得分: 3

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

  1. @Composable
  2. fun PetCareTheme(
  3. darkTheme: Boolean = isSystemInDarkTheme(),
  4. // 动态颜色在Android 12+上可用
  5. dynamicColor: Boolean = false, // 将其更改为false以默认禁用
  6. content: @Composable () -> Unit
  7. ) {
  8. val colorScheme = when {
  9. dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
  10. val context = LocalContext.current
  11. if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
  12. }
  13. darkTheme -> DarkColorScheme
  14. else -> LightColorScheme
  15. }
  16. val view = LocalView.current
  17. if (!view.isInEditMode) {
  18. SideEffect {
  19. val window = (view.context as Activity).window
  20. window.statusBarColor = colorScheme.primary.toArgb()
  21. WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
  22. }
  23. }
  24. MaterialTheme(
  25. colorScheme = colorScheme,
  26. typography = Typography,
  27. content = content
  28. )
  29. }

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

英文:

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

  1. @Composable
  2. fun PetCareTheme(
  3. darkTheme: Boolean = isSystemInDarkTheme(),
  4. // Dynamic color is available on Android 12+
  5. dynamicColor: Boolean = false, // change to false to disable by default
  6. content: @Composable () -> Unit
  7. ) {
  8. val colorScheme = when {
  9. dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
  10. val context = LocalContext.current
  11. if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
  12. }
  13. darkTheme -> DarkColorScheme
  14. else -> LightColorScheme
  15. }
  16. val view = LocalView.current
  17. if (!view.isInEditMode) {
  18. SideEffect {
  19. val window = (view.context as Activity).window
  20. window.statusBarColor = colorScheme.primary.toArgb()
  21. WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
  22. }
  23. }
  24. MaterialTheme(
  25. colorScheme = colorScheme,
  26. typography = Typography,
  27. content = content
  28. )
  29. }

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:

确定