如何在Jetpack Compose的TextField中添加不可编辑且随输入移动的后缀？

一、固定不可编辑的后缀（位于输入框右侧，不随文本移动） #

如果需要后缀固定在输入框尾部右侧、不随用户输入文本移动，直接使用Material3 TextField 的 suffix 参数即可，该参数支持传入任意Compose组件，示例如下：

import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

// 输入文本状态
var inputText by remember { mutableStateOf("") }

TextField(
    value = inputText,
    onValueChange = { inputText = it },
    label = { Text("请输入金额") },
    // 不可编辑的固定后缀
    suffix = { Text("元") },
    modifier = Modifier.fillMaxWidth()
)

这种方式下，后缀始终显示在输入框最右侧，不会被输入文本挤走，适合作为单位、符号类的固定标识。

二、随输入文本移动的后缀（紧跟输入内容后） #

如果需要后缀紧跟用户输入文本后方、随文本长度变化移动且不可编辑，推荐使用自定义 VisualTransformation 实现，它能在不修改实际输入数据的前提下调整文本显示形式，同时保证光标不会进入后缀区域：

1. 自定义VisualTransformation #

import androidx.compose.ui.text.AnnotatedString
import androidx.compose.ui.text.input.OffsetMapping
import androidx.compose.ui.text.input.TransformedText
import androidx.compose.ui.text.input.VisualTransformation

class SuffixVisualTransformation(private val suffix: String) : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        // 将后缀拼接到输入文本后作为显示内容
        val displayText = 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(displayText), offsetMapping)
    }
}

2. 在TextField中使用 #

import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

var inputText by remember { mutableStateOf("") }

TextField(
    value = inputText,
    onValueChange = { inputText = it },
    label = { Text("请输入金额") },
    // 应用自定义后缀转换
    visualTransformation = SuffixVisualTransformation("元"),
    modifier = Modifier.fillMaxWidth()
)

该实现中，实际的inputText仅存储用户输入内容，后缀仅用于显示，用户无法编辑或删除后缀，光标也会被限制在输入文本区域内，完全符合“随输入移动且不可编辑”的需求。

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