Kotlin Compose 手动修改语言的终极指南：解决过时问题

2024-03-13 04:35:41

Kotlin Compose 中手动更改语言：解决已过时的问题

导言

在 Kotlin Compose 应用程序中实现多语言支持至关重要，因为它使我们能够针对不同的语言环境构建用户友好且可访问的界面。本文将深入探讨如何手动更改 Kotlin Compose 中的语言，并介绍如何解决 updateConfiguration() 方法已过时的问题。

创建语言选择器

为了手动更改语言，我们需要一个语言选择器。这可以是一个 DropdownMenu 或 RadioButtonGroup，其中列出应用程序支持的语言。让我们创建一个 DropdownMenu 示例：

@Composable
fun LanguageSelector() {
    val languages = listOf("English", "Spanish", "French")
    val selectedLanguage = remember { mutableStateOf(languages[0]) }

    DropdownMenu(expanded = false, onDismissRequest = { /*TODO*/ }) {
        languages.forEach { language ->
            DropdownMenuItem(onClick = { selectedLanguage.value = language }) {
                Text(text = language)
            }
        }
    }
}

更新语言

当用户从语言选择器中选择一个新语言时，我们需要更新应用程序的语言。使用 Context.createConfigurationContext() 和 CompositionLocalProvider() 可以解决 updateConfiguration() 已过时的问题：

val newLocale = Locale(selectedLanguage)
val newConfiguration = Configuration(context.resources.configuration).apply {
    setLocale(newLocale)
}
val newContext = context.createConfigurationContext(newConfiguration)

CompositionLocalProvider(LocalConfiguration provides newConfiguration) {
    // 你的 Compose UI
}

通过 createConfigurationContext()，我们可以创建一个新的配置上下文，其中包含更新后的语言设置。然后，我们将新的配置上下文作为组合本地变量提供给 Compose UI，从而更新应用程序的语言。

持久化语言设置

为了在应用程序重新启动后保留语言设置，我们需要将它持久化到存储中。我们可以使用 SharedPreferences 来实现这一点：

val sharedPreferences = context.getSharedPreferences("app_preferences", Context.MODE_PRIVATE)

fun setLanguage(language: String) {
    sharedPreferences.edit().putString("language", language).apply()
}

fun getLanguage(): String {
    return sharedPreferences.getString("language", "en") ?: "en"
}

完整的示例

以下是使用 Kotlin Compose 手动更改语言的完整示例：

@Composable
fun MyApp() {
    val selectedLanguage = remember { mutableStateOf(getLanguage()) }
    val newContext = context.createConfigurationContext(Configuration(context.resources.configuration).apply {
        setLocale(Locale(selectedLanguage.value))
    })

    CompositionLocalProvider(LocalConfiguration provides newContext.configuration) {
        Scaffold(
            topBar = {
                TopAppBar(title = { Text(text = "Language Selector") })
            },
            content = {
                LanguageSelector()
            }
        )
    }
}