Compose AlertDialog 在 Samsung 上總是全寬

Question

在我的帶有 One UI 5.0 和 Android 13 的三星 Galaxy S22+ 上，撰寫 AlertDialog 總是占據全寬，在其他設備上它按預期工作。

撰寫版本是 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")
                }
            }
        )
    }
}

Answer 1

在我的設備上進行 Android 13 更新后，具有 XML 布局的對話框采用預期寬度。 但是 Compose AlertDialog和Dialog占據了整個寬度。 我們僅在使用 Compose Dialogs 時遇到這個問題，

我正在使用帶有一個 UI 5.0和Android 13的三星 Galaxy M32 ，應用程序使用Compose 版本 1.1.0-beta01和targetSdkVersion 33，

使用usePlatformDefaultWidth = true沒有幫助，

這個問題很可能是 Compose 方面的錯誤，您可以在 compose 中找到 Dialog 和 AlertDialog 的快速修復，

1. 對於撰寫 AlertDialog()

我使用了修飾符並將DialogProperty usePlatformDefaultWidth設置為 false 並將fillMaxWidth設置為分數 0.92f。

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. 對於撰寫對話框（）

我已經使用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 = {})

編寫 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
                ) {
                    ........
                }
            })
    })

Answer 2

Alert-Dialog-Composable 接受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 ，因此對話框不應填滿屏幕寬度。

-> 你看到的很可能是一個錯誤，應該報告