Jetpack Compose：BasicTextField密码OutputTransformation切换后退格清空问题

问题原因 #

你自定义的SenhaOutputTransformation未正确处理文本变换与原始文本的光标/修改操作映射，导致切换显示/隐藏状态后，Compose无法识别退格操作的有效范围，进而触发全量删除。

解决方案 #

方案1：使用官方自带的PasswordVisualTransformation（推荐） #

官方实现已处理所有光标映射、状态切换细节，直接替换自定义实现即可：

修改BasicTextField的outputTransformation赋值逻辑：

outputTransformation = if (!exibirSenha) {
    PasswordVisualTransformation('\u2022') // 指定掩码字符为你需要的圆点
} else {
    VisualTransformation.None // 用None替代null，语义更清晰
},

方案2：修复自定义变换实现 #

若必须使用自定义实现，需显式声明光标位置映射，确保变换前后文本位置一一对应：

@Stable
class SenhaOutputTransformation : VisualTransformation {
    companion object {
        private const val MASCARA_INTERNA = '\u2022'
    }

    override fun filter(text: AnnotatedString): TransformedText {
        val maskedText = AnnotatedString(MASCARA_INTERNA.toString().repeat(text.length))
        // 声明偏移映射，保证变换前后光标位置一致
        val offsetMapping = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int = offset
            override fun transformedToOriginal(offset: Int): Int = offset
        }
        return TransformedText(maskedText, offsetMapping)
    }
}

注：Jetpack Compose新版本中OutputTransformation已被VisualTransformation替代，旧版本若需保留OutputTransformation，需确保重写offsetMapping属性而非仅实现transformOutput。

同步修改BasicTextField的outputTransformation赋值：

outputTransformation = if (!exibirSenha) {
    SenhaOutputTransformation()
} else {
    VisualTransformation.None
},

额外优化建议 #

• 用VisualTransformation.None替代null，代码语义更明确，避免潜在空值问题；
• 确保senhaState为正确的TextFieldValue状态实例，切换显示状态时不会丢失原始文本内容。

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