喷气背包Compose：随着文本增长，TextField在AlertDialog外对齐

Question

如果您运行以下可组合部件并在文本字段中输入长的多行文本，您会发现随着文本增长，文本字段会离开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")
            }
        }
    )
}

- Isaak

---

我认为 Modifier.heightIn 可能会有所帮助。 - bylazy

我尝试使用Modifier.height（intrinsicSize：IntrinsicSize）但没有成功。您能解释一下如何使用吗？ - Isaak

Answer 1

Modifier.heightIn 会将内容的高度限制在 mindp 和 maxdp 之间，以符合传入的测量约束条件。如果传入的约束条件更为严格，则请求的大小将遵循传入的约束条件，并尝试尽可能接近首选大小。

Column {
    var text by remember { mutableStateOf("some text")}
    OutlinedTextField(value = text,
        onValueChange = {text = it},
        textStyle = MaterialTheme.typography.headlineSmall,
        label = { Text(text = "Text") },
        modifier = Modifier.fillMaxWidth()
            .heightIn(min = 0.dp, max = 150.dp))
}

文本框将会增长到在 heightIn 修改器中指定的最大高度，然后开始滚动。

- bylazy

---

这对我发布的AlertDialog的示例不起作用。 - Isaak

你需要将TextField放置在对话框的占位符“text”中，而不是“title”。 - bylazy

那也不行。 - Isaak