Compose固定高度OutlinedTextField的SupportingText被截断问题

问题核心：给OutlinedTextField设置固定高度后，输入多行文本时，组件会挤压底部的supportingText空间，导致其被截断或遮挡。需要在保持文本框固定高度的同时，始终显示supportingText，文本区域可滚动且不超出高度。

解决方案：拆分布局，预留supportingText空间 #

通过自定义decorationBox，将文本输入区域和supportingText的空间明确划分，让文本区域只占用除supportingText之外的固定高度，并添加滚动功能。这样即使输入多行文本，也只会在预留的文本区域内滚动，不会挤压supportingText。

修改后的代码示例：

var text by rememberSaveable { mutableStateOf("") }
val supportingText = "Optional"
val interactionSource = remember { MutableInteractionSource() }
// 计算supportingText的高度，确保预留足够空间
val supportingTextHeight = with(LocalDensity.current) {
    Text(supportingText).computeIntrinsicHeight(Constraints(maxWidth = Int.MAX_VALUE)).toDp()
}
// 文本框总固定高度
val totalTextFieldHeight = 200.dp
// 文本输入区域可用高度 = 总高度 - supportingText高度 - 上下内边距
val inputAreaHeight = totalTextFieldHeight - supportingTextHeight - 32.dp

OutlinedTextField(
    value = text,
    onValueChange = { 
        text = it 
        onValueChangeAction(it) 
    },
    label = { Text(label) },
    keyboardOptions = KeyboardOptions(
        capitalization = KeyboardCapitalization.Sentences
    ),
    supportingText = { Text(supportingText) },
    modifier = Modifier
        .fillMaxWidth()
        .height(totalTextFieldHeight),
    singleLine = false,
    textFieldStyle = TextFieldDefaults.outlinedTextFieldStyle(
        // 给文本输入区域添加滚动
        textFieldModifier = Modifier
            .verticalScroll(rememberScrollState())
            .height(inputAreaHeight)
    ),
    // 自定义装饰盒，确保supportingText布局在固定位置
    decorationBox = { innerTextField ->
        TextFieldDefaults.outlinedTextFieldDecorationBox(
            value = text,
            innerTextField = innerTextField,
            label = { Text(label) },
            supportingText = { Text(supportingText) },
            enabled = true,
            singleLine = false,
            visualTransformation = VisualTransformation.None,
            interactionSource = interactionSource,
            contentPadding = PaddingValues(
                top = 16.dp,
                bottom = supportingTextHeight + 16.dp // 预留supportingText的底部空间
            )
        )
    }
)

原理说明 #

1. 计算supportingText高度：通过computeIntrinsicHeight提前算出supportingText的占用高度，确保预留足够空间。
2. 划分文本输入区域高度：从总固定高度中减去supportingText高度和内边距，得到文本输入区域的可用高度。
3. 添加滚动：给文本输入区域设置verticalScroll，让多行文本在固定高度内滚动，不会溢出。
4. 自定义装饰盒：通过decorationBox控制整体布局，确保supportingText始终显示在底部预留的空间中，不会被文本输入区域挤压。

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