如何在Jetpack Compose中实现多自定义主题并通过按钮切换？

问题背景 #

已基于Jetpack Compose实现明暗主题切换，现在要扩展为多自定义主题（粉色、红色、彩虹等），需要实现不同按钮点击切换对应主题的功能。

原明暗主题核心代码：

@Composable
fun AppTheme(darkTheme: Boolean = false,
             content: @Composable() () -> Unit) {
    val colors = if (darkTheme) DarkThemeColors else LightThemeColors
    MaterialTheme(
        colors = colors,
        typography = MaterialTheme.typography,
        shapes = MaterialTheme.shapes,
    ) {
        content()
    }
}

已编写的多主题版本AppTheme：

@Composable
fun AppTheme(currentTheme: String,
             content: @Composable() () -> Unit) {
    val colors = when (currentTheme) {
        "Pink" -> PinkThemeColors
        "Light" -> LightThemeColors
        "Red" -> RedThemeColors
        "Rainbow" -> RainbowTheme
        else -> LightThemeColors
    }
    MaterialTheme(
        colors = colors,
        typography = MaterialTheme.typography,
        shapes = MaterialTheme.shapes,
    ) {
        content()
    }
}

实现步骤 #

1. 更新全局主题状态管理 #

修改WeatherApplication中的状态，把原来的布尔型isDark换成字符串类型的当前主题状态，并添加设置主题的方法：

class WeatherApplication : Application() {
    // 初始化默认主题为Light
    val currentTheme = mutableStateOf("Light")

    // 设置主题的方法，接收主题字符串
    fun setCurrentTheme(theme: String) {
        currentTheme.value = theme
    }
}

2. 修改MainActivity的AppTheme调用 #

把原来传入darkTheme的逻辑改成传入currentTheme的值，并更新回调函数类型：

@Inject
lateinit var application: WeatherApplication

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        AppTheme(currentTheme = application.currentTheme.value) {
            // 把回调改成接收字符串的类型
            WeatherApp(onChangeTheme = { theme -> application.setCurrentTheme(theme) })
        }
    }
}

3. 传递回调到SettingsScreen #

更新WeatherApp中传递给SettingsScreen的回调，确保是接收字符串的类型：

@Composable
fun WeatherApp(onChangeTheme: (String) -> Unit) {
    // 其他页面逻辑...
    SettingsScreen(onChangeTheme = onChangeTheme)
}

4. 在SettingsScreen中添加主题切换按钮 #

为每个主题创建按钮，点击时传递对应的主题字符串：

@Composable
fun SettingsScreen(onChangeTheme: (String) -> Unit) {
    Column(modifier = Modifier.padding(16.dp)) {
        // 浅色主题按钮
        Button(onClick = { onChangeTheme("Light") }) {
            Text("浅色主题")
        }
        // 粉色主题按钮
        Button(onClick = { onChangeTheme("Pink") }) {
            Text("粉色主题")
        }
        // 红色主题按钮
        Button(onClick = { onChangeTheme("Red") }) {
            Text("红色主题")
        }
        // 彩虹主题按钮
        Button(onClick = { onChangeTheme("Rainbow") }) {
            Text("彩虹主题")
        }
    }
}

优化建议（可选） #

用枚举类代替字符串，避免拼写错误，提升代码健壮性：

1. 定义主题枚举：

enum class AppThemeType {
    Light, Pink, Red, Rainbow
}

2. 更新WeatherApplication的状态类型：

val currentTheme = mutableStateOf(AppThemeType.Light)

fun setCurrentTheme(theme: AppThemeType) {
    currentTheme.value = theme
}

3. 修改AppTheme的参数和when逻辑：

@Composable
fun AppTheme(currentTheme: AppThemeType,
             content: @Composable() () -> Unit) {
    val colors = when (currentTheme) {
        AppThemeType.Pink -> PinkThemeColors
        AppThemeType.Light -> LightThemeColors
        AppThemeType.Red -> RedThemeColors
        AppThemeType.Rainbow -> RainbowTheme
    }
    MaterialTheme(
        colors = colors,
        typography = MaterialTheme.typography,
        shapes = MaterialTheme.shapes,
    ) {
        content()
    }
}

4. 按钮点击时传递枚举值：

Button(onClick = { onChangeTheme(AppThemeType.Pink) }) {
    Text("粉色主题")
}

内容的提问来源于stack exchange，提问作者Skyline