如何为Jetpack Compose的OutlinedTextField添加固定后缀文本？

问题背景 #

需要在OutlinedTextField中添加始终显示的固定后缀（例如输入200时显示“200 km”），尝试直接添加suffix参数时出现函数参数不匹配错误，报错提示现有OutlinedTextField重载均不支持该参数。

原代码：

OutlinedTextField(
    value = screenState.batterySize.toString(),
    onValueChange = onBatterySizeChange,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    textStyle = MaterialTheme.typography.subtitle1.copy(
        color = MaterialTheme.colors.primary,
        textAlign = TextAlign.Center
    )
)

添加suffix后的错误代码：

OutlinedTextField(
    value = screenState.batterySize.toString(),
    onValueChange = onBatterySizeChange,
    suffix = Text(text = "test"),
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    textStyle = MaterialTheme.typography.subtitle1.copy(
        color = MaterialTheme.colors.primary,
        textAlign = TextAlign.Center
    )
)

报错信息：

None of the following functions can be called with the arguments supplied.
OutlinedTextField(TextFieldValue, (TextFieldValue) → Unit, Modifier = ..., Boolean = ..., Boolean = ..., TextStyle = ..., (() → Unit)? = ..., (() → Unit)? = ..., (() → Unit)? = ..., (() → Unit)? = ..., Boolean = ..., VisualTransformation = ..., KeyboardOptions = ..., KeyboardActions = ..., Boolean = ..., Int = ..., MutableInteractionSource = ..., Shape = ..., TextFieldColors = ...) defined in androidx.compose.material
OutlinedTextField(String, (String) → Unit, Modifier = ..., Boolean = ..., Boolean = ..., TextStyle = ..., (() → Unit)? = ..., (() → Unit)? = ..., (() → Unit)? = ..., (() → Unit)? = ..., Boolean = ..., VisualTransformation = ..., KeyboardOptions = ..., KeyboardActions = ..., Boolean = ..., Int = ..., MutableInteractionSource = ..., Shape = ..., TextFieldColors = ...) defined in androidx.compose.material

原因说明 #

Jetpack Compose的Material库（androidx.compose.material）中的OutlinedTextField并没有suffix参数，该参数是Material3库（androidx.compose.material3）中TextField组件的特性。如果项目依赖的是Material库，直接使用suffix会导致参数不匹配。

解决方案 #

方法1：使用VisualTransformation实现输入框内后缀 #

通过自定义VisualTransformation，将后缀文本附加到输入内容后，同时保证实际输入值不受后缀影响。

// 自定义VisualTransformation
class SuffixVisualTransformation(private val suffix: String) : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        // 拼接输入文本和后缀
        val transformedText = text + suffix
        // 偏移量：让光标停在输入文本末尾，不进入后缀区域
        val offsetMapping = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int = offset
            override fun transformedToOriginal(offset: Int): Int = offset.coerceAtMost(text.length)
        }
        return TransformedText(AnnotatedString(transformedText), offsetMapping)
    }
}

// 使用示例
OutlinedTextField(
    value = screenState.batterySize.toString(),
    onValueChange = onBatterySizeChange,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    textStyle = MaterialTheme.typography.subtitle1.copy(
        color = MaterialTheme.colors.primary,
        textAlign = TextAlign.Center
    ),
    // 应用自定义VisualTransformation
    visualTransformation = SuffixVisualTransformation(" km")
)

这种方法的优势是后缀完全嵌入输入框内部，视觉上和输入内容融为一体，且不影响实际输入值的处理。

方法2：自定义Row布局模拟后缀效果 #

如果需要更灵活的样式控制，可以用Row将OutlinedTextField和后缀Text包裹起来，通过调整边框样式让两者视觉上统一。

Row(
    modifier = Modifier
        .fillMaxWidth()
        .border(
            width = 1.dp,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.6f),
            shape = MaterialTheme.shapes.medium
        ),
    verticalAlignment = Alignment.CenterVertically
) {
    OutlinedTextField(
        value = screenState.batterySize.toString(),
        onValueChange = onBatterySizeChange,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        textStyle = MaterialTheme.typography.subtitle1.copy(
            color = MaterialTheme.colors.primary,
            textAlign = TextAlign.Center
        ),
        // 去掉TextField自身的边框
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Color.Transparent,
            unfocusedBorderColor = Color.Transparent,
            disabledBorderColor = Color.Transparent
        ),
        modifier = Modifier.weight(1f)
    )
    // 后缀文本
    Text(
        text = " km",
        style = MaterialTheme.typography.subtitle1.copy(
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.6f)
        ),
        modifier = Modifier.padding(end = 16.dp)
    )
}

这种方法适合需要单独控制后缀样式（如颜色、大小）的场景，缺点是需要手动处理边框的视觉统一。

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