Jetpack Compose UI - 在 AlertDialog 中单击时按钮宽度会发生变化答案

【问题标题】：Jetpack Compose UI - Button width changes on click inside AlertDialogJetpack Compose UI - 在 AlertDialog 中单击时按钮宽度会发生变化
【发布时间】：2022-12-01 05:09:24
【问题描述】：

我正面临这个带有 AlertDialog 和 Button 的 fillMaxWidth(fraction = ...) 的奇怪问题，其中 Button 最初以一种尺寸显示，单击时它会缩小以包裹其内容。这是我可以创建的最基本的示例。我尝试过多个版本的 Compose，但它们都做同样的事情。有任何想法吗？

AlertDialog(
    modifier = modifier,
    onDismissRequest = {},
    text = { },
    buttons = {
        Button(
            onClick = { },
            modifier = Modifier
                .fillMaxWidth(0.75f)
                .padding(start = 12.dp, end = 12.dp, bottom = 8.dp)
            ) {
                Text(text = "Done")
            }
        }
    )

点击前：

点击后：

【问题讨论】：

如果删除 .fillMaxWidth(0.75f) 会发生什么？
传递给 AlertDialog 的修饰符是什么样的？

标签： android android-jetpack-compose android-compose-button android-jetpack-compose-ui

【解决方案1】：

我使用了来自 here 的示例可组合项，并为每个按钮添加了你的修饰符，所以它看起来像

@Composable
fun AlertDialogSample() {
    MaterialTheme {
        Column {
            val openDialog = remember { mutableStateOf(false) }

            Button(onClick = {
                openDialog.value = true
            }) {
                Text("Click me")
            }

            if (openDialog.value) {

                AlertDialog(
                    onDismissRequest = {
                        // Dismiss the dialog when the user clicks outside the dialog or on the back
                        // button. If you want to disable that functionality, simply use an empty
                        // onCloseRequest.
                        openDialog.value = false
                    },
                    title = {
                        Text(text = "Dialog Title")
                    },
                    text = {
                        Text("Here is a text ")
                    },
                    confirmButton = {
                        Button(
                            modifier = Modifier
                                .fillMaxWidth(0.75f)
                                .padding(start = 12.dp, end = 12.dp, bottom = 8.dp),
                            onClick = {
                                openDialog.value = false
                            }) {
                            Text("This is the Confirm Button")
                        }
                    },
                    dismissButton = {
                        Button(
                            modifier = Modifier
                                .fillMaxWidth(0.75f)
                                .padding(start = 12.dp, end = 12.dp, bottom = 8.dp),
                            onClick = {
                                openDialog.value = false
                            }) {
                            Text("This is the dismiss Button")
                        }
                    }
                )
            }
        }

    }
}

我看到按钮的宽度为 75%。

没有解释为什么您会看到所描述的问题，但确实为您提供了解决方案。

【讨论】：