如何使用composables在应用程序中动态切换明暗主题

基础概念

Composable 是 Jetpack Compose 的核心概念之一，它是一种可组合的 UI 组件。Jetpack Compose 是 Android 开发中的一个现代 UI 工具包，旨在简化 UI 开发过程。通过 Composable，你可以将 UI 拆分为多个可重用的组件，这些组件可以独立地构建和更新。

动态切换明暗主题的优势

用户体验：用户可以根据自己的偏好选择主题，提升用户体验。
灵活性：应用程序可以在运行时动态切换主题，而不需要重启应用。
维护性：通过将主题相关的代码分离，可以更容易地维护和更新主题。

类型

静态主题：在应用启动时确定主题，之后不再改变。
动态主题：在应用运行时可以根据用户选择或其他条件动态切换主题。

应用场景

用户偏好设置：用户可以在设置中选择自己喜欢的主题。
系统主题切换：根据操作系统的主题变化自动调整应用主题。
特定事件主题：在特定事件（如节日）期间切换到特定主题。

实现动态切换明暗主题的步骤

定义主题：创建不同的主题样式。
使用 Composable：在 Composable 中使用这些主题。
管理状态：使用 remember 和 mutableStateOf 来管理当前主题状态。
切换主题：提供切换主题的逻辑。

示例代码

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun MyAppTheme(content: @Composable () -> Unit) {
    val isDarkTheme = remember { mutableStateOf(isSystemInDarkTheme()) }
    val colors = if (isDarkTheme.value) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        content = content
    )
}

object LightColorPalette {
    val primary = MaterialTheme.colors.primary
    val background = MaterialTheme.colors.background
    val surface = MaterialTheme.colors.surface
    val onPrimary = MaterialTheme.colors.onPrimary
    val onBackground = MaterialTheme.colors.onBackground
    val onSurface = MaterialTheme.colors.onSurface
}

object DarkColorPalette {
    val primary = MaterialTheme.colors.primaryVariant
    val background = MaterialTheme.colors.background
    val surface = MaterialTheme.colors.surfaceVariant
    val onPrimary = MaterialTheme.colors.onPrimaryVariant
    val onBackground = MaterialTheme.colors.onBackgroundVariant
    val onSurface = MaterialTheme.colors.onSurfaceVariant
}

@Composable
fun ThemeSwitcher(onThemeChange: (Boolean) -> Unit) {
    val isDarkTheme = remember { mutableStateOf(isSystemInDarkTheme()) }
    val toggleTheme = {
        isDarkTheme.value = !isDarkTheme.value
        onThemeChange(isDarkTheme.value)
    }

    // 这里可以添加一个按钮或其他 UI 元素来触发主题切换
    // 例如：Button(onClick = toggleTheme) { Text("Toggle Theme") }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyAppTheme {
        Surface(color = MaterialTheme.colors.background) {
            Text(text = "Hello, World!")
        }
    }
}