Jetpack Compose：如何以编程方式将主题从浅色模式更改为深色模式 [英] Jetpack Compose: How to change theme from light to dark mode programmatically onClick

问题描述

tl；dr切换主题并在光明和黑暗主题之间重组应用程序onClick。

您好！我有一个有趣的问题，我一直在努力解决，希望能得到一些帮助。我正在尝试实现一个设置屏幕，允许用户更改应用程序的主题(选择与系统设置匹配的深色、浅色或自动)。

我正在通过在选择调色板时调用isSystemInDarkTheme()函数成功地动态设置主题，但我很难通过单击按钮在亮主题和暗主题之间重组应用。

我现在的策略是创建一个主题模型，该模型从用户实际选择主题的设置组件提升状态。然后，该主题模型向定制主题(围绕材质主题)公开一个主题状态变量，以决定是选择浅色调色板还是深色调色板。以下是相关代码-->；

主题

@Composable
fun CustomTheme(
themeViewModel: ThemeViewModel = viewModel(),
content: @Composable() () -> Unit,
) {
   val colors = when (themeViewModel.theme.value.toString()) {
       "Dark" -> DarkColorPalette
       "Light" -> LightColorPalette
       else -> if (isSystemInDarkTheme()) DarkColorPalette else LightColorPalette
   }

   MaterialTheme(
       colors = colors,
       typography = typography,
       shapes = shapes,
       content = content
   )
   }

主题模型和状态变量

class ThemeViewModel : ViewModel() {
private val _theme = MutableLiveData("Auto")
val theme: LiveData<String> = _theme

fun onThemeChanged(newTheme: String) {
    when (newTheme) {
        "Auto" -> _theme.value = "Light"
        "Light" -> _theme.value = "Dark"
        "Dark" -> _theme.value = "Auto"
    }
}
}

组件(UI)代码

@Composable
fun Settings(
   themeViewModel: ThemeViewModel = viewModel(),
) {
   ...
   val theme: String by themeViewModel.theme.observeAsState("")
   ...
   ScrollableColumn(Modifier.fillMaxSize()) {
       Column {
        ...
        Card() {
            Row() {
                Text(text = theme,
                    modifier = Modifier.clickable(
                        onClick = {
                            themeViewModel.onThemeChanged(theme)
                        }
                    )
                )
            }
        }
   }

非常感谢您的时间和帮助！*我已经省略了UI组件中的一些代码，可能在此过程中遗漏了一些闭包语法。

推荐答案

Jetpack theming codelab中显示的一种可能性是通过输入参数设置暗模式，这样可以确保当参数更改时主题会重新组合：

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

在mainActivity中，您可以观察view Model的更改并将它们传递给您的CustomTheme：

val darkTheme = themeViewModel.darkTheme.observeAsState(initial = true)

CustomTheme(darkTheme.value){
//yourContent
}

这样，您的作文预览可以简单地设置为黑色主题的样式：

@Composable
private fun DarkPreview() {
    CustomTheme(darkTheme = true) {
        content
    }
}

这篇关于Jetpack Compose：如何以编程方式将主题从浅色模式更改为深色模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！