如何实现Jetpack Compose AlertDialog的RTL布局？按设备区域调整Composable方向

一、手动强制AlertDialog使用RTL布局 #

如果需要忽略系统设置，强制AlertDialog采用RTL布局，可通过CompositionLocalProvider覆盖LocalLayoutDirection的默认值：

@Composable
fun RtlAlertDialogExample() {
    val showDialog = remember { mutableStateOf(true) }

    if (showDialog.value) {
        CompositionLocalProvider(LocalLayoutDirection provides LayoutDirection.Rtl) {
            AlertDialog(
                onDismissRequest = { showDialog.value = false },
                title = { Text("标题（RTL模式）") },
                text = { Text("这是RTL布局下的对话框内容，文字会从右到左排列") },
                confirmButton = {
                    TextButton(onClick = { showDialog.value = false }) {
                        Text("确认")
                    }
                },
                dismissButton = {
                    TextButton(onClick = { showDialog.value = false }) {
                        Text("取消")
                    }
                }
            )
        }
    }
}

此方式下，对话框内的标题、内容、按钮都会遵循RTL规则排列，比如取消按钮会显示在视觉左侧，确认按钮在右侧。

二、根据设备区域设置自动切换布局方向 #

Compose默认会自动跟随系统区域设置调整布局方向，只需确保应用支持目标RTL语言即可：

1. 配置应用语言支持
   在模块的build.gradle.kts（或build.gradle）中添加RTL语言的支持配置：

android {
    defaultConfig {
        resConfigs("en", "ar", "fa") // 包含阿拉伯语、波斯语等RTL语言
    }
}

2. 自动适配布局方向
   LocalLayoutDirection会根据系统区域设置自动返回LayoutDirection.Ltr或LayoutDirection.Rtl，内置Composable（包括AlertDialog）会自动响应这个变化：

@Composable
fun AutoLayoutDialogExample() {
    val showDialog = remember { mutableStateOf(true) }
    val layoutDirection = LocalLayoutDirection.current

    if (showDialog.value) {
        AlertDialog(
            onDismissRequest = { showDialog.value = false },
            title = { Text(if (layoutDirection == LayoutDirection.Rtl) "عنوان" else "Title") },
            text = { Text(if (layoutDirection == LayoutDirection.Rtl) "محتوى الحوار" else "Dialog content") },
            confirmButton = {
                TextButton(onClick = { showDialog.value = false }) {
                    Text(if (layoutDirection == LayoutDirection.Rtl) "تأكيد" else "Confirm")
                }
            },
            dismissButton = {
                TextButton(onClick = { showDialog.value = false }) {
                    Text(if (layoutDirection == LayoutDirection.Rtl) "إلغاء" else "Cancel")
                }
            }
        )
    }
}

当系统切换到RTL语言时，对话框的布局方向、按钮位置、文字排列会自动适配RTL规则。

3. 自定义Composable的RTL适配
   对于自定义组件，可通过LocalLayoutDirection调整布局逻辑，比如Row的排列方向：

@Composable
fun RtlAwareRow() {
    val layoutDirection = LocalLayoutDirection.current
    Row(
        horizontalArrangement = when (layoutDirection) {
            LayoutDirection.Ltr -> Arrangement.Start
            LayoutDirection.Rtl -> Arrangement.End
        }
    ) {
        Text("第一项")
        Text("第二项")
    }
}

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