Jetpack Compose：如何通过编程将主题从浅色模式更改为深色模式onClick

Question

TL；DR在单击时更改主题并在明暗主题之间重新组合应用程序。

你好我有一个有趣的问题，我一直在努力解决，希望能得到一些帮助。我试图实现一个设置屏幕，让用户改变应用程序的主题（选择黑暗，光明，或自动匹配系统设置）。

我在选择调色板时通过调用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组件中省略了一些代码，在这个过程中可能遗漏了一些闭包语法。

Answer 1

根据文档，处理由用户操作触发的主题更改（即通过自定义构建设置选择系统主题以外的主题）的官方方法是使用

AppCompatDelegate.setDefaultNightMode()

仅此调用就可以处理大多数事情，包括重新启动任何活动（因此，重新组合）。为此，我们需要：

• 调用setContent来扩展appcompactivity的活动

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

@Composable
private fun isNightMode() = when (AppCompatDelegate.getDefaultNightMode()) {
    AppCompatDelegate.MODE_NIGHT_NO -> false
    AppCompatDelegate.MODE_NIGHT_YES -> true
    else -> isSystemInDarkTheme()
}

这是很好的，因为它避免了在活动中获取此值的需要，只是为了将其传递给带有CustomTheme（isDard=isDard）的主题。

本文将详细介绍以上所有内容。

Answer 2

如果您需要一个按钮/开关来更改主题并将其作为设置持久化，您也可以通过使用Jetpack数据存储（推荐）或SharedReferences来实现这一点，在MainActivity中获取主题状态，并将其传递给您的主题可编程序，无论您想在哪里修改它。

您可以在这个GitHub repo中找到一个完整的工作示例。

本例使用单例和Hilt作为依赖项，适用于您想要存储的所有首选项。

Answer 3

Jetpack主题代码实验室中显示了一种可能性，即通过输入参数设置深色模式，以确保在参数更改时重新组合主题：

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

在你的主活动中，你可以观察到你的视图模型的变化，并将它们传递给你的自定义主题：

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

CustomTheme(darkTheme.value){
//yourContent
}

通过这种方式，您的撰写预览可以简单地在深色主题中设置样式：

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