Jetpack Compose：如何优雅自定义OutlinedTextFieldDecorationBox的高度

我正在尝试使用Android Jetpack Compose创建自定义TextField，代码如下：

TextFieldDefaults.OutlinedTextFieldDecorationBox(
    contentPadding = PaddingValues(vertical = 10.dp),
    value = searchText,
    innerTextField = innerTextField,
    enabled = enabled,
    singleLine = singleLine,
    visualTransformation = VisualTransformation.None,
    interactionSource = interactionSource,
    colors = textFieldColors,
    leadingIcon = {
        Icon(
            modifier = Modifier.size(leadingIconSize),
            painter = painterResource(id = R.drawable.ic_search),
            contentDescription = ""
        )
    },
    placeholder = {
        Text("what is doin ")
    }
)

根据设计要求，该文本框高度应为36dp，但默认高度约为56dp。我未找到自定义该值的相关资料，因此使用contentPadding参数实现了需求，但这种方式不够优雅。请问是否有其他实现方法？

解决方案 #

1. 给DecorationBox设置固定高度并适配内部元素 #

直接给TextFieldDefaults.OutlinedTextFieldDecorationBox添加固定高度修饰符，同时调整内部元素的尺寸和对齐方式，确保内容垂直居中且不被裁剪：

TextFieldDefaults.OutlinedTextFieldDecorationBox(
    modifier = Modifier.height(36.dp),
    contentPadding = PaddingValues(vertical = 4.dp), // 配合高度微调内边距
    value = searchText,
    innerTextField = {
        // 确保输入框填充高度并垂直居中
        TextField(
            modifier = Modifier.fillMaxHeight().align(Alignment.CenterVertically),
            value = searchText,
            onValueChange = { searchText = it },
            singleLine = singleLine,
            visualTransformation = VisualTransformation.None,
            interactionSource = interactionSource,
            colors = textFieldColors
        )
    },
    enabled = enabled,
    singleLine = singleLine,
    visualTransformation = VisualTransformation.None,
    interactionSource = interactionSource,
    colors = textFieldColors,
    leadingIcon = {
        // 缩小图标尺寸适配36dp高度
        Icon(
            modifier = Modifier.size(20.dp).align(Alignment.CenterVertically),
            painter = painterResource(id = R.drawable.ic_search),
            contentDescription = "搜索图标"
        )
    },
    placeholder = {
        // 调整占位符字号适配高度
        Text("what is doin ", fontSize = 14.sp)
    }
)

2. 自定义TextField基础样式 #

通过重写TextFieldDefaults的样式配置，统一调整文本、占位符的尺寸，再配合固定高度实现需求：

// 定义自定义样式
val customTextFieldStyle = TextFieldDefaults.outlinedTextFieldStyle(
    textStyle = LocalTextStyle.current.copy(fontSize = 14.sp),
    placeholderStyle = LocalTextStyle.current.copy(fontSize = 14.sp)
)

// 使用自定义样式的OutlinedTextField
OutlinedTextField(
    modifier = Modifier.height(36.dp),
    value = searchText,
    onValueChange = { searchText = it },
    singleLine = singleLine,
    textStyle = customTextFieldStyle.textStyle,
    placeholder = { Text("what is doin ") },
    leadingIcon = {
        Icon(
            painter = painterResource(id = R.drawable.ic_search),
            contentDescription = "搜索图标",
            modifier = Modifier.size(20.dp)
        )
    },
    colors = textFieldColors,
    interactionSource = interactionSource,
    decorationBox = { innerTextField ->
        TextFieldDefaults.OutlinedTextFieldDecorationBox(
            contentPadding = PaddingValues(vertical = 4.dp),
            value = searchText,
            innerTextField = innerTextField,
            enabled = enabled,
            singleLine = singleLine,
            visualTransformation = VisualTransformation.None,
            interactionSource = interactionSource,
            colors = textFieldColors,
            leadingIcon = { /* 图标代码 */ },
            placeholder = { /* 占位符代码 */ },
            style = customTextFieldStyle
        )
    }
)

关键说明 #

默认56dp高度由默认内边距（垂直16dp）+文本行高+图标尺寸共同构成。要实现36dp高度，核心是：

• 给TextField/DecorationBox设置固定高度Modifier.height(36.dp)
• 缩小内部元素（图标、文本）的尺寸，避免内容溢出
• 微调contentPadding，保证内容垂直居中

内容的提问来源于stack exchange，提问作者Oğuzhan Aslan