TL;DR 更改主题并在单击时在浅色和深色主题之间重新组合应用程序。
你好!我有一个有趣的问题,我一直在努力解决,希望得到一些帮助。我正在尝试实现一个设置屏幕,让用户更改应用程序的主题(选择与系统设置匹配的深色、浅色或自动)。
我已成功设置主题动态地通过调用isSystemInDarkTheme()选择调色板时的功能,但我很难重组单击按钮即可在浅色和深色主题之间切换应用程序。
我现在的策略是创建一个主题模型,该模型从用户实际在其中选择主题的设置组件中提升状态。然后,该主题模型将主题状态变量公开给自定义主题(围绕材质主题),以决定是否选择浅色或深色调色板。这是相关代码-->
Theme
@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 组件中省略了一些代码,我可能在此过程中遗漏了一些闭包语法。