Compose中BasicTextField添加trailingIcon后高度被拉伸的解决办法

问题描述 #

给BasicTextField设置trailingIcon后，输入框高度会被强制拉伸。从截图能看到，未添加trailingIcon的“555g”输入框，比加了trailingIcon的“Ingredient1”输入框明显更短。

原因分析 #

查看Google原生TextField.kt的源码后发现，当存在trailingIcon时，框架会用一个带有IconDefaultSizeModifier的Box包裹它，这个Modifier强制设置了minHeight = 48.dp，进而拉高了整个输入框的高度：

if (trailing != null) {
    Box(
        modifier = Modifier
            .layoutId(LeadingId)
            .then(IconDefaultSizeModifier),
        contentAlignment = Alignment.Center
    ) {
        trailing()
    }
}

我的实现代码 #

BasicTextField(
    value = state,
    //... 其他参数
    decorationBox = @Composable {
        TextFieldDefaults.OutlinedTextFieldDecorationBox(
            value = textVal,
            visualTransformation = VisualTransformation.None,
            innerTextField = it,
            singleLine = singleLine,
            enabled = enabled,
            interactionSource = interactionSource,
            trailingIcon = trailingIcon,
            // 自定义内边距，保留垂直边距但修改水平边距
            contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                top = 10.dp,
                bottom = 10.dp,
                start = 12.dp,
                end = 8.dp
            ),
            container = {}
          )
    }
)

解决方案 #

方法一：自定义trailingIcon的布局Modifier #

直接给你的trailingIcon添加Modifier，覆盖默认的minHeight，让高度自适应：

trailingIcon = {
    // 以清除图标为例，替换成你的实际图标
    Icon(
        imageVector = Icons.Default.Clear,
        contentDescription = "清除输入内容",
        modifier = Modifier
            .size(24.dp) // 自定义图标尺寸
            .wrapContentHeight() // 取消强制minHeight，高度自适应
            .align(Alignment.CenterVertically)
    )
}

方法二：重写DecorationBox的trailingIcon逻辑 #

放弃使用默认OutlinedTextFieldDecorationBox的trailingIcon参数，自己在decorationBox里实现图标布局，完全控制尺寸：

BasicTextField(
    value = state,
    onValueChange = { state = it },
    //... 其他参数
    decorationBox = @Composable { innerTextField ->
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            // 放置输入框主体
            Box(modifier = Modifier.weight(1f)) {
                innerTextField()
            }
            // 自定义trailingIcon布局
            trailingIcon?.let { icon ->
                Box(
                    modifier = Modifier
                        .padding(end = 8.dp)
                        .size(24.dp), // 自定义图标大小
                    contentAlignment = Alignment.Center
                ) {
                    icon()
                }
            }
        }
    }
)

方法三：强制覆盖输入框的最小高度 #

给整个BasicTextField添加minHeight Modifier，直接覆盖框架强制设置的48dp最小高度：

BasicTextField(
    value = state,
    //... 其他参数
    modifier = Modifier.minHeight(36.dp), // 设置你需要的最小高度
    decorationBox = @Composable {
        TextFieldDefaults.OutlinedTextFieldDecorationBox(
            //... 原有参数
        )
    }
)

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