Jetpack Compose：如何自定义TextField组件中的内部文本框？

我自定义了一个TotalOutlinedTextField组件，当前效果如下：

其中：

• 1 - TextField组件外边框
• 2 - 内部文本框边框
• 3 - 尾部图标（Material 3组件的后缀）

可以看到，内部文本框存在多余的起始和结束边框，且当前占满了TextField组件的整个宽度。我希望实现如下效果（让内部文本框类似wrap_content的效果）：

请问是否有办法自定义BaseTextField的内部边框，还是需要深入Compose从零构建自己的文本框？

我的TotalOutlinedTextField代码：

@Composable
private fun TotalOutlinedTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    label: @Composable (() -> Unit)? = null,
    placeholder: @Composable (() -> Unit)? = null,
    leadingIcon: @Composable (() -> Unit)? = null,
    trailingIcon: @Composable (() -> Unit)? = null,
    isError: Boolean = false,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    singleLine: Boolean = false,
    maxLines: Int = if (singleLine) 1 else Int.MAX_VALUE,
    minLines: Int = 1,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small,
    colors: TextFieldColors = TextFieldDefaults.outlinedTextFieldColors()
) {
    val textColor = textStyle.color.takeOrElse {
        colors.textColor(enabled).value
    }
    val mergedTextStyle = textStyle.merge(TextStyle(color = textColor))

    @OptIn(ExperimentalMaterialApi::class)
    BasicTextField(
        value = value,
        modifier = if (label != null) {
            modifier.semantics(mergeDescendants = true) {}
        } else {
            modifier
        }
            .background(colors.backgroundColor(enabled).value, shape)
            .defaultMinSize(
                minWidth = TextFieldDefaults.MinWidth,
                minHeight = TextFieldDefaults.MinHeight
            ),
        onValueChange = onValueChange,
        enabled = enabled,
        readOnly = readOnly,
        textStyle = mergedTextStyle,
        cursorBrush = SolidColor(colors.cursorColor(isError).value),
        visualTransformation = visualTransformation,
        keyboardOptions = keyboardOptions,
        keyboardActions = keyboardActions,
        interactionSource = interactionSource,
        singleLine = singleLine,
        maxLines = maxLines,
        minLines = minLines,
        decorationBox = @Composable { innerTextField ->
            TextFieldDefaults.OutlinedTextFieldDecorationBox(
                value = value,
                visualTransformation = visualTransformation,
                innerTextField = innerTextField,
                placeholder = placeholder,
                label = label,
                leadingIcon = leadingIcon,
                trailingIcon = trailingIcon,
                singleLine = singleLine,
                enabled = enabled,
                isError = isError,
                interactionSource = interactionSource,
                colors = colors,
                border = {
                    TextFieldDefaults.BorderBox(
                        enabled,
                        isError,
                        interactionSource,
                        colors,
                        shape
                    )
                },
                contentPadding = textFieldWithoutLabelPadding(
                    top = PADDING_8.dp,
                    bottom = PADDING_8.dp,
                )
            )
        }
    )
}

解决方案 #

不需要从零构建文本框，通过重写decorationBox自定义布局即可实现需求，核心调整两点：

1. 移除内部多余边框 #

问题根源是TextFieldDefaults.OutlinedTextFieldDecorationBox内部默认会绘制文本区域的边框，你可以跳过默认装饰容器，自行编排内部元素：

2. 实现内部文本框wrap_content效果 #

通过布局参数控制文本区域仅占用内容宽度，而非强制填满父容器。

替换原BasicTextField中的decorationBox实现：

decorationBox = @Composable { innerTextField ->
    Box(
        modifier = Modifier
            .background(colors.backgroundColor(enabled).value, shape)
            .border(
                width = 1.dp,
                color = colors.borderColor(enabled, isError).value,
                shape = shape
            )
            .padding(horizontal = 16.dp, vertical = 8.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            leadingIcon?.invoke()
            
            // 文本区域：仅占内容宽度
            Box(
                modifier = Modifier.weight(1f, fill = false)
            ) {
                if (value.isEmpty() && placeholder != null) {
                    placeholder()
                }
                innerTextField()
            }
            
            trailingIcon?.invoke()
        }
    }
    
    // 标签单独处理（如果需要）
    label?.let {
        TextFieldDefaults.Label(
            modifier = Modifier.padding(start = 16.dp),
            enabled = enabled,
            label = it,
            interactionSource = interactionSource,
            colors = colors
        )
    }
}

同时移除原BasicTextField修饰符中的.defaultMinSize(...)，避免强制设置最小宽度，让组件可以根据内容自适应。

这样调整后，内部文本区域会自动适配内容宽度，且不会出现多余的内部边框，完全符合目标效果。

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