Jetpack 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")
            }
        }
    )
}

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 修飾符中指定的最大高度，然后開始滾動。