Jetpack Compose中Alert Dialog内TextField换行异常问题

我使用Jetpack Compose创建了一个包含TextField的AlertDialog，但遇到问题：按下键盘回车键换行时，TextField内的内容会向上偏移。

原实现代码：

@Composable
fun SimpleAlert(
    title: String = "Ask a Question",
    onDismiss: () -> Unit,
    onSubmit: (text: String) -> Unit
) {

        val text = remember { mutableStateOf("") }
        val textHint = "Write your question..."
        val textLength = remember { mutableStateOf(0) }
        val isAnonymous = remember { mutableStateOf(false) }


        AlertDialog(
            onDismissRequest = {
                onDismiss()
            },
            title = {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp)
                ) {
                    Row(
                        horizontalArrangement = Arrangement.End,
                        modifier = Modifier
                            .fillMaxWidth()
                    ) {
                        Image(
                            painter = painterResource(id = R.drawable.ic_exit),
                            contentDescription = "",
                            modifier = Modifier.
                            background(Color.Gray, CircleShape).clickable {
                                onDismiss()
                            }
                        )
                    }
                    Text(
                        text = title,
                        modifier = Modifier.fillMaxWidth(),
                        textAlign = TextAlign.Center
                    )
                }
            },
            text = {
                Column(
                    verticalArrangement = Arrangement.Center
                ) {
                    TextField(
                        value = text.value,
                        onValueChange = {
                            if (it.length <= 200) {
                                textLength.value = it.length
                                text.value = it
                            }
                        },
                        label = {
                          Text(text = textHint)
                        },
                        modifier = Modifier
                            .padding(top = 16.dp)
                            .sizeIn(minHeight = 120.dp)
                            .background(Color.Transparent)
                    )
                }

            },
            buttons = {
                Row(
                    modifier = Modifier
                        .padding(16.dp)
                        .fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween,
                    verticalAlignment = Alignment.CenterVertically
                ) {
                    Row(
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Switch(checked = isAnonymous.value, onCheckedChange = {
                            isAnonymous.value = it
                        })
                        Text(text = "Anonymously")
                    }

                    Text(text = "${textLength.value}/200")
                }
                Button(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 24.dp),
                    onClick = {
                        onSubmit(text.value)
                    }) { Text(text = "Submit") }
            }
            )
}

问题原因与解决方法 #

问题根源在于两处布局设置：

1. 包裹TextField的Column使用了verticalArrangement = Arrangement.Center，当TextField内容行数变化时，居中布局会强制调整内容位置，引发偏移；
2. TextField未明确开启多行输入支持，默认的单行逻辑在换行时会导致布局计算异常。

修改后的代码：

@Composable
fun SimpleAlert(
    title: String = "Ask a Question",
    onDismiss: () -> Unit,
    onSubmit: (text: String) -> Unit
) {
    val text = remember { mutableStateOf("") }
    val textHint = "Write your question..."
    val textLength = remember { mutableStateOf(0) }
    val isAnonymous = remember { mutableStateOf(false) }

    AlertDialog(
        onDismissRequest = { onDismiss() },
        title = {
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp)
            ) {
                Row(
                    horizontalArrangement = Arrangement.End,
                    modifier = Modifier.fillMaxWidth()
                ) {
                    Image(
                        painter = painterResource(id = R.drawable.ic_exit),
                        contentDescription = "关闭弹窗",
                        modifier = Modifier
                            .background(Color.Gray, CircleShape)
                            .clickable { onDismiss() }
                    )
                }
                Text(
                    text = title,
                    modifier = Modifier.fillMaxWidth(),
                    textAlign = TextAlign.Center
                )
            }
        },
        text = {
            // 移除居中布局，让内容从顶部自然排列
            Column {
                TextField(
                    value = text.value,
                    onValueChange = {
                        if (it.length <= 200) {
                            textLength.value = it.length
                            text.value = it
                        }
                    },
                    label = { Text(text = textHint) },
                    // 明确开启多行输入支持
                    singleLine = false,
                    // 限制最大行数，避免弹窗高度失控（可按需调整）
                    maxLines = 5,
                    modifier = Modifier
                        .padding(top = 16.dp)
                        .fillMaxWidth()
                        .heightIn(min = 120.dp)
                        .background(Color.Transparent)
                )
            }
        },
        buttons = {
            Row(
                modifier = Modifier
                    .padding(16.dp)
                    .fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween,
                verticalAlignment = Alignment.CenterVertically
            ) {
                Row(verticalAlignment = Alignment.CenterVertically) {
                    Switch(checked = isAnonymous.value, onCheckedChange = { isAnonymous.value = it })
                    Text(text = "匿名发布")
                }
                Text(text = "${textLength.value}/200")
            }
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(start = 16.dp, top = 0.dp, end = 16.dp, bottom = 24.dp),
                onClick = { onSubmit(text.value) }
            ) { Text(text = "提交") }
        }
    )
}

关键修改点 #

• 移除了text区域Column的verticalArrangement = Arrangement.Center，让TextField内容从顶部开始排列，避免行数变化时的布局偏移；
• 给TextField添加singleLine = false，明确支持多行输入；
• 添加maxLines = 5（可根据需求调整），限制最大行数防止弹窗过高；
• 将sizeIn(minHeight = 120.dp)改为heightIn(min = 120.dp)并添加fillMaxWidth()，让TextField占满宽度，布局更稳定。

内容的提问来源于stack exchange，提问作者Mustafa Berk