Jetpack Compose中TextField随文本增长溢出AlertDialog如何解决

运行下方Composable代码时，在AlertDialog标题区域内嵌的OutlinedTextField中输入较长多行文本，随着文本内容不断增多，输入框会超出AlertDialog的布局边界，复现代码如下：

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@Preview
@Composable
fun MyComposable() {
    var text by remember {
        mutableStateOf("Press enter a couple of times to see the problem")
    }
    AlertDialog(
        onDismissRequest = { },
        title = {
            OutlinedTextField(
                value = text,
                onValueChange = { text = it },
                textStyle = MaterialTheme.typography.h5,
                label = { Text(text = "Text") },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp)
            )
        },
        confirmButton = {
            TextButton(
                onClick = {}
            ) {
                Text("Done")
            }
        },
        dismissButton = {
            TextButton(
                onClick = { }
            ) {
                Text("Cancel")
            }
        }
    )
}

AlertDialog组件的title插槽默认是为短文本标题设计的，布局测量时采用无垂直高度上限的内容包裹规则，不会给子组件传递强制的最大高度约束。OutlinedTextField在未收到明确垂直高度约束时，会优先按自身文本内容的实际高度测量布局，即使代码中设置了固定height(150.dp)，也会被多行增长的文本撑破，最终超出对话框边界。

推荐两种修复方式，按需选择即可：

方案一（最符合组件设计规范） #

将OutlinedTextField从title插槽迁移到text插槽，text插槽是AlertDialog专门用来承载长内容的区域，默认内置了高度约束和溢出滚动逻辑，不会出现内容溢出问题。如果需要保留标题，可以在输入框上方单独添加Text组件作为标题：

@Preview
@Composable
fun MyComposableFixed() {
    var text by remember {
        mutableStateOf("Press enter a couple of times to see the problem")
    }
    AlertDialog(
        onDismissRequest = { },
        title = { Text("输入标题") }, // 短标题放在title插槽
        text = {
            OutlinedTextField(
                value = text,
                onValueChange = { text = it },
                textStyle = MaterialTheme.typography.h5,
                label = { Text(text = "Text") },
                modifier = Modifier
                    .fillMaxWidth()
                    .height(150.dp)
            )
        },
        confirmButton = {
            TextButton(onClick = {}) { Text("Done") }
        },
        dismissButton = {
            TextButton(onClick = {}) { Text("Cancel") }
        }
    )
}

方案二（保留输入框在title插槽） #

如果业务要求必须把输入框放在title区域，只需要给OutlinedTextField显式约束最大高度，让超出高度的文本在输入框内部滚动，不会撑破父布局：
首先添加需要的导入：

import androidx.compose.foundation.layout.heightIn

然后修改OutlinedTextField的代码，用heightIn替代固定height，同时可配合maxLines参数限制最大显示行数，输入框到指定高度/行数后会自动停止扩展，内部滚动显示超出内容：

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    textStyle = MaterialTheme.typography.h5,
    label = { Text(text = "Text") },
    maxLines = 5, // 限制最多显示5行，可按需调整
    modifier = Modifier
        .fillMaxWidth()
        .heightIn(max = 150.dp) // 约束最大高度，避免撑破父布局
)

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