组合AlertDialog在三星手机上始终占据整个宽度。

Question

在我的三星Galaxy S22+上，使用One UI 5.0和Android 13，compose AlertDialog总是占据整个宽度，而在其他设备上则按预期工作。

Compose版本为1.3.1

您可以通过简单地从Google Play商店下载材料目录应用程序来重现此问题。

我怀疑这很可能是Compose方面的错误，如果有快速修复方法，我将不胜感激。

@Composable
fun AlertDialogSample() {
    val openDialog = remember { mutableStateOf(true) }

    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 = "Title")
            },
            text = {
                Text(
                    "This area typically contains the supportive text " +
                        "which presents the details regarding the Dialog's purpose."
                )
            },
            confirmButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                    }
                ) {
                    Text("Confirm")
                }
            },
            dismissButton = {
                TextButton(
                    onClick = {
                        openDialog.value = false
                    }
                ) {
                    Text("Dismiss")
                }
            }
        )
    }
}

更新:

已经创建了一个问题，似乎这是三星方面的一个错误: https://issuetracker.google.com/issues/260755409

- Jokubas Trinkunas

---

你尝试过在AlertDialog中添加Modifier.padding()吗？ - Hamed

是的，它并没有帮助，问题与此无关。 - Jokubas Trinkunas

与三星Galaxy S21 FE 5G和Android 13（OneUI 5.0）表现相同。在Android 12上是正确的，在另一款非三星Android 13手机上也是正确的。显然是三星的错误。无论如何，我们需要一个解决方法。 - Zdenek Sima

奇怪的是，使用基于视图的AlertDialog.Builder可以正常工作，只有Compose存在这个问题。因此，解决方法是坚持使用基于视图的AlertDialog。 - Jokubas Trinkunas

这在最近几次三星更新后，无论是基于视图的还是普通的组合对话框中都开始出现了这种情况，在其他设备上同样的事情完全正常。 - Aman Verma

Answer 1

在我的设备上升级到Android 13后，具有XML布局的对话框宽度正常。但是Compose的AlertDialog和Dialog却占据了整个宽度。我们只在使用Compose Dialogs时遇到了这个问题。

我正在使用带有One UI 5.0和Android 13的三星Galaxy M32，应用程序使用Compose版本1.1.0-beta01和targetSdkVersion 33，

使用usePlatformDefaultWidth = true没有帮助，

这个问题很可能是Compose方面的一个bug， 您可以在compose中找到快速修复Dialog和AlertDialog的方法，

对于Compose AlertDialog（）：

我使用modifier，并设置DialogProperty usePlatformDefaultWidth为false，并使用分数0.92f设置fillMaxWidth。

modifier = Modifier.fillMaxWidth(0.92f),
properties =DialogProperties(usePlatformDefaultWidth =false),

编写AlertDialog()代码段：

AlertDialog(
    modifier = Modifier.fillMaxWidth(0.92f),
    properties = DialogProperties(
        usePlatformDefaultWidth = false
    ),
    onDismissRequest = { ... },
    buttons = {
        Column(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            ...
        }
    },
    title = {
        
    },
    text = {
        Column(
            modifier = Modifier
                .fillMaxWidth()
        ) {
            ........
        }
    }
)

2. 关于 Compose Dialog()

我使用了 Surface 来包裹对话框内容，使用 modifier = Modifier.fillMaxWidth(0.92f) 作为修饰符， 采用设置半径的 RoundedCornerShape，将背景颜色设置为 Color.Transparent，并将 DialogProperty usePlatformDefaultWidth 设置为 false

Surface(
        modifier = Modifier.fillMaxWidth(0.92f),
        shape = RoundedCornerShape(8.dp),
        color = Color.Transparent,
        content = {})

Compose Dialog() 代码片段：

Dialog(
    onDismissRequest = { },
    properties = DialogProperties(
        dismissOnClickOutside = true,
        dismissOnBackPress = true,
        usePlatformDefaultWidth = false
    ),
    content = {
        Surface(
            modifier = Modifier.fillMaxWidth(0.92f),
            shape = RoundedCornerShape(8.dp),
            color = Color.Transparent,
            content = {
                Column(
                    modifier = Modifier
                        .background(color = colorResource(id = android.R.color.white))
                        .fillMaxWidth(1f)
                        .wrapContentHeight(),
                    horizontalAlignment = Alignment.CenterHorizontally,
                    verticalArrangement = Arrangement.Center
                ) {
                    ........
                }
            })
    })

- Pradip Tilala

Answer 2

Pradip Tilala提供的答案可以正常工作，但我发现它存在问题。在大屏幕甚至横向模式下，您的对话框会延伸到屏幕的两侧，变得过于宽广，而Material3建议您的对话框应该在280到560 dp之间。 所以这就是我最终得出的好看而正确的结果。将此修饰符设置为您的警报对话框。

modifier = Modifier
            .requiredWidthIn(
                280.dp,
                min((LocalConfiguration.current.screenWidthDp - customPadding).dp, 560.dp)
            ),

使用 requiredWidthIn，如果您的视图宽度小于或大于给定值，则会将其设置为您分别指定的最小值和最大值，这里是 280 和 560。而且因为 560 对于某些屏幕来说太大了，您可以选择 560 和其他值之间的最小值。我设置的另一个看起来不错的值是屏幕宽度减去一些填充数字。请注意，使用 requiredWidthIn 您不再需要将 fillMaxWidth(0.92f) 设置为您的 modifier。

此外，这是适用于所有屏幕并看起来不错的自定义填充：

val customPadding = LocalConfiguration.current.screenWidthDp / 6

- Prs2

---

谢谢，是的，这确实是一个修复。但仍然需要手动设置宽度，这是一个丑陋的解决方法。希望Compose团队能在某个时候提供一个修复。 - Jokubas Trinkunas

当然，他们需要修复许多东西。 - Prs2

Answer 3

警告对话框组件接受DialogProperties。

@Composable
fun AlertDialog(
    properties: DialogProperties = DialogProperties()
    ...
)

/**
 * Properties used to customize the behavior of a [Dialog].      
   ...
 * @property usePlatformDefaultWidth Whether the width of the dialog's content should
 * be limited to the platform default, which is smaller than the screen width.
 */
class DialogProperties @ExperimentalComposeUiApi constructor(
    val usePlatformDefaultWidth: Boolean = true
    ...
)

默认情况下，usePlatformDefaultWidth = true，因此对话框不应填充屏幕宽度。

-> 您看到的很可能是一个错误，应该报告。

- m.reiter

---

嗨，是的，这个问题已经被报告了，您可以投票支持以便更快地修复它！看起来这是三星这边的一个漏洞：https://issuetracker.google.com/issues/260755409 - Jokubas Trinkunas