为什么 Jetpack Compose 中的对话框默认对齐到底部而不是居中？

Question

我对 Jetpack Compose 中

Dialog

的默认对齐方式有疑问。该对话框始终显示在屏幕底部。有趣的是，它在 Pixel3、4 (Android 14) 和 Oppo 上运行良好，但在三星 Galaxy (Android 13) 上不起作用。我的意思是对话框在屏幕底部对齐。我尝试使用 fillMaxSize() 制作一个框并处理对话框外的单击事件，但它无法按预期工作。我可以尝试做什么来解决这个问题？

@AndroidEntryPoint
class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            YourAppTheme {
                Dialog(onDismissRequest = { /*TODO*/ }) {
                    Column(
                        modifier = androidx.compose.ui.Modifier
                            .fillMaxWidth()
                            .background(Color.White)
                            .padding(16.dp),
                        verticalArrangement = Arrangement.Center,
                        horizontalAlignment = Alignment.CenterHorizontally
                    ) {
                        Text(
                            text = "Title",
                            style = MaterialTheme.typography.titleSmall,
                            color = Color.Black
                        )
                        Spacer(modifier = Modifier.height(4.dp))
                        Text(
                            text = "Desc",
                            style = MaterialTheme.typography.bodySmall,
                            color = Color.Black
                        )

                    }
                }
            }
        }
    }
}

Answer 1

如果您遇到此问题，这里有一个可能的解决方法。它包括嵌套两个 Column 可组合项并将它们包装在 Box 中。然后，对话框 UI 将应用到嵌套的列中。

@Composable
fun ConfirmDialog(
    title: String,
    description: String,
    onCancelClicked: () -> Unit,
    onAcceptClicked: () -> Unit,
    @StringRes acceptText: Int = R.string.confirm,
) {
    Dialog(
        onDismissRequest = onCancelClicked,
    ) {
        Box(
            modifier = Modifier
                .fillMaxSize()
                .clickable(
                    onClick = onCancelClicked,
                    indication = null,
                    interactionSource = remember { MutableInteractionSource() }
                )
        ) {
            Column(
                modifier = Modifier.fillMaxSize(),
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Center
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(MaterialTheme.colorScheme.onPrimary, shape = MaterialTheme.shapes.medium)
                        .padding(MaterialTheme.spacing.medium),
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    Text(
                        text = title,
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center,
                        style = MaterialTheme.typography.headlineSmall
                    )
                    Spacer(modifier = Modifier.height(MaterialTheme.spacing.medium))
                    Text(text = description, style = MaterialTheme.typography.bodyMedium,
                        textAlign = TextAlign.Center)
                    Spacer(modifier = Modifier.height(MaterialTheme.spacing.medium))
                    DialogButtons(
                        onCancelClicked = onCancelClicked,
                        onAcceptClicked = onAcceptClicked,
                        acceptText = acceptText
                    )
                }
            }
        }
    }
}

对话框按钮设计由您决定，但如果您也在其他可组合项中使用它，则将其分开会很有用。

@Composable
private fun DialogButtons(
    @StringRes acceptText: Int,
    onCancelClicked: () -> Unit, onAcceptClicked: () -> Unit
) {
    Row(
        horizontalArrangement = Arrangement.spacedBy(MaterialTheme.spacing.medium),
    ) {
        Button(
            textId = R.string.cancel,
            onButtonClick = onCancelClicked,
            modifier = Modifier.weight(1f),
            colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.onPrimary),
            textColor = MaterialTheme.colorScheme.primary,
        )
        Button(
            textId = acceptText,
            onButtonClick = onAcceptClicked,
            modifier = Modifier.weight(1f),
            colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.error),
            textColor = MaterialTheme.colorScheme.background
        )
    }
}