Jetpack Compose TextField如何实现用户输入时不消失的固定占位符

原有代码直接在Box中叠加Text组件会存在三个核心问题：

• 固定位置的Text会和用户输入的内容重叠，遮挡输入文字
• 硬编码的padding无法适配不同主题、尺寸下TextField的默认内容内边距，对齐效果不稳定
• 无法和TextField的聚焦、禁用、错误等状态联动，样式和输入框默认风格不统一

方案1：使用内置prefix/suffix参数（推荐） #

Material Design 规范的TextField组件原生提供了prefix和suffix参数，专门用来放置输入框内输入内容前后的固定内容，无论用户是否输入内容都会常驻显示，自动适配输入内容的对齐样式、输入框状态。
代码实现如下：

OutlinedTextField(
    value = input,
    onValueChange = onInputChange,
    keyboardOptions = KeyboardOptions(
        autoCorrect = false,
        keyboardType = KeyboardType.Password
    ),
    modifier = Modifier.fillMaxWidth(),
    // 固定显示在输入内容前方的占位符
    prefix = { Text(text = placeholder) }
    // 若需要固定在输入内容后方，替换为 suffix = { Text(text = placeholder) } 即可
)

方案2：自定义VisualTransformation（适用于更复杂的固定内容场景） #

如果你的固定占位符需要和输入内容融合展示、或者自定义显示位置，可以通过自定义VisualTransformation实现，该方式只会修改输入内容的视觉效果，不会修改实际存储的输入值，还可以自动处理光标偏移逻辑，避免出现光标错位问题。
代码实现如下：
首先自定义视觉转换器：

class FixedPlaceholderTransformation(
    private val fixedContent: String
) : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        // 拼接固定内容和输入内容，若要实现后缀固定则调换顺序为 text + AnnotatedString(fixedContent)
        val displayedText = AnnotatedString(fixedContent) + text
        // 处理光标偏移，避免光标跑到固定内容区域，后缀固定场景需要同步调整此处计算逻辑
        val offsetMapping = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int {
                return offset + fixedContent.length
            }

            override fun transformedToOriginal(offset: Int): Int {
                return (offset - fixedContent.length).coerceAtLeast(0)
            }
        }
        return TransformedText(displayedText, offsetMapping)
    }
}

在TextField中使用：

OutlinedTextField(
    value = input,
    onValueChange = onInputChange,
    keyboardOptions = KeyboardOptions(
        autoCorrect = false,
        keyboardType = KeyboardType.Password
    ),
    modifier = Modifier.fillMaxWidth(),
    visualTransformation = FixedPlaceholderTransformation(placeholder)
)

两种方案都可以完美实现输入时占位符不消失的需求，普通前后缀固定场景优先选择方案1即可。

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