Jetpack compose：在对话框中滚动会产生奇怪的效果

Question

我正在尝试创建一个对话框，您可以在其中选择一个数字。我使用FlowRow伴奏者。但滚动时会产生奇怪的结果。我想我在这里遗漏了一些东西。

代码：

@Composable
fun AlertDialogErrorTest() {
    var showDlg by remember { mutableStateOf(false)}
    val scrollState = rememberScrollState()
    if (showDlg) {
        AlertDialog(
            onDismissRequest = { showDlg = false },
            title = { Text(text = "Pick something from the list") },
            text = {
                   FlowRow(modifier = Modifier.verticalScroll(scrollState)) {
                       for (i in 1..100) {
                           Box (modifier = Modifier.size(48.dp).padding(8.dp).background(Color.LightGray), contentAlignment = Alignment.Center) {
                               Text (i.toString())
                           }
                       }
                   }
            },
            confirmButton = {
                TextButton(onClick = { showDlg = false }) {
                        Text("Done")
                    }
            },
            dismissButton = {
                TextButton(onClick = { showDlg = false }) {
                        Text("Cancel")
                    }
            }
        )
    }

    Button(onClick = {showDlg = true}) {
        Text("Show dialog")
    }
}

滚动时的结果：

Answer 1

这是因为AlertDialog当前不支持可滚动内容。如果您认为这是一个错误，您可以在 Compose 问题跟踪器中报告它。

同时，您可以使用Dialog位于AlertDialog.

Dialog(
    onDismissRequest = { showDlg = false },
    content = {
        Column(Modifier.background(Color.White)) {
            Text(
                text = "Pick something from the list",
                style = MaterialTheme.typography.subtitle1,
                modifier = Modifier.align(Alignment.CenterHorizontally)
            )
            FlowRow(
                modifier = Modifier
                    .verticalScroll(scrollState)
                    .weight(1f)
            ) {
                for (i in 1..100) {
                    Box(
                        modifier = Modifier
                            .size(48.dp)
                            .padding(8.dp)
                            .background(Color.LightGray),
                        contentAlignment = Alignment.Center
                    ) {
                        Text(i.toString())
                    }
                }
            }
            FlowRow(
                mainAxisSpacing = 8.dp,
                crossAxisSpacing = 12.dp,
                modifier = Modifier
                    .align(Alignment.End)
                    .padding(horizontal = 8.dp, vertical = 2.dp)
            ) {
                TextButton(onClick = { showDlg = false }) {
                    Text("Cancel")
                }
                TextButton(onClick = { showDlg = false }) {
                    Text("Done")
                }
            }
        }
    },
)

结果：