Jetpack Compose：随着文本的增长，TextField 在 AlertDialog 之外对齐

Question

If you run the following composable and enter a long multiline text into the textfield, you will see that as the text grows, the textfield leaves the AlertDialog.

Is there a way to fix this?

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 constrain the height of the content to be between mindp and maxdp as permitted by the incoming measurement Constraints. If the incoming constraints are more restrictive the requested size will obey the incoming constraints and attempt to be as close as possible to the preferred size.

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

Textfield will grow to max height specified in heightIn modifier and then start scrolling.