Jetpack Compose中如何让BasicTextField的尾随图标紧跟文本

问题原因 #

你的BasicTextField使用了.fillMaxSize()修饰符，导致整个TextField容器占据父布局的全部宽度，当文本内容较短时，尾随图标会被推到容器最右端，从而与文本产生较大间距。

修改方案 #

1. 调整TextField容器宽度约束

将BasicTextField的Modifier中的.fillMaxSize()替换为.fillMaxWidth().wrapContentHeight()，让容器宽度占满父布局但高度自适应内容，避免过度拉伸：

BasicTextField(
    value = selectedText,
    onValueChange = { extendedView = false },
    readOnly = true,
    textStyle = MaterialTheme.typography.bodyMedium,
    modifier = Modifier
        .fillMaxWidth() // 替换fillMaxSize为fillMaxWidth
        .wrapContentHeight()
        .menuAnchor()
) {
    // 其余代码不变
}

2. 缩小尾随图标与文本的间距

在TextFieldDefaults.TextFieldDecorationBox中添加trailingIconSpacing参数，自定义图标与文本的间距（默认是4.dp，可按需调整）：

TextFieldDefaults.TextFieldDecorationBox(
    value = selectedText,
    innerTextField = it,
    singleLine = true,
    enabled = false,
    visualTransformation = VisualTransformation.None,
    trailingIcon = {
        Image(
            painter = painterResource(id = LocalAppResources.current.arrowDown),
            contentDescription = "Arrow down",
            contentScale = ContentScale.None,
            alignment = Alignment.Center
        )
    },
    placeholder = { account.name },
    interactionSource = remember { MutableInteractionSource() },
    contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
        top = 2.dp, bottom = 2.dp, start = 6.dp, end = 0.dp
    ),
    trailingIconSpacing = 2.dp, // 自定义图标与文本的间距
    colors = TextFieldDefaults.textFieldColors(
        containerColor = Color.Transparent,
        unfocusedIndicatorColor = Color.Transparent,
        disabledIndicatorColor = Color.Transparent
    ),
)

3. （可选）限制文本区域宽度

如果上述调整后仍有间距，可以给innerTextField添加宽度约束，让文本区域仅适配内容宽度，图标紧跟其后：

TextFieldDefaults.TextFieldDecorationBox(
    // 其他参数不变
    innerTextField = {
        Box(modifier = Modifier.wrapContentWidth()) {
            it()
        }
    },
    // 其他参数不变
)

修改后的完整代码 #

BasicTextField(
    value = selectedText,
    onValueChange = { extendedView = false },
    readOnly = true,
    textStyle = MaterialTheme.typography.bodyMedium,
    modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .menuAnchor()
) {
    TextFieldDefaults.TextFieldDecorationBox(
        value = selectedText,
        innerTextField = it,
        singleLine = true,
        enabled = false,
        visualTransformation = VisualTransformation.None,
        trailingIcon = {
            Image(
                painter = painterResource(id = LocalAppResources.current.arrowDown),
                contentDescription = "Arrow down",
                contentScale = ContentScale.None,
                alignment = Alignment.Center
            )
        },
        placeholder = { account.name },
        interactionSource = remember { MutableInteractionSource() },
        contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
            top = 2.dp, bottom = 2.dp, start = 6.dp, end = 0.dp
        ),
        trailingIconSpacing = 2.dp,
        colors = TextFieldDefaults.textFieldColors(
            containerColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent
        ),
    )
}

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