嘿，老铁们，今天咱们聊聊 Android Compose 的小秘密——怎么用 Compose API 简化文本输入的格式。别以为这只是一堆代码，实际操作起来可比想象中geng酷炫。

你说过“我想在输入框里自动加点符号”，对吧？比如手机号每隔三位插空格，或者信用卡号每四位加个“-”。传统Zuo法是直接在 onValueChange 里改字符串，然后再塞回去。但那光标跳来跳去，用户体验差得hen。

Compose 里有个叫 VisualTransformation 的接口，专门解决这个“显示 vs 数据”不一致的问题。它Ke以让你把原始字符串保持不变，只在 UI 上Zuo视觉层面的加工。

它其实只有一个 filter 函数，接受 AnnotatedString，返回 TransformedText。光标映射就是告诉系统：当用户在显示文本里点了某个位置，这个位置对应到原始字符串的哪儿。

class MyVisualTransformation : VisualTransformation {
    override fun filter: TransformedText {
        // 这里先把每个字符后面加一个连字符
        val transformed = text.text.map { "$it-" }.joinToString
        return TransformedText(
            text = AnnotatedString,
            offsetMapping = MyOffsetMapping
        )
    }
}

你kan到没？我们根本没有改动 text 本身，只是包装了一下。

OffsetMapping 有两个函数：originalToTransformed 和 transformedToOriginal。第一个是把原始光标位置映射到显示文本；第二个则相反。对连字符这种固定规则来说写起来挺直观：

class MyOffsetMapping : OffsetMapping {
    override fun originalToTransformed: Int {
        // 每个字符后面多了一个 '-'
        return offset * 2
    }
    override fun transformedToOriginal: Int {
        // 假设 offset 是偶数时对应原始位置
        return offset / 2
    }
}

不过Ru果你插空格、逗号、美元符号之类的东西，就需要geng细致地处理边界情况啦。

我们先把Zui常见的手机号码格式化拿出来演示：12345678901 -> 123-456-7890-1。Compose Neng让这件事变得像玩游戏一样简单。

class PhoneNumberVisualTransformation : VisualTransformation {
    override fun filter: TransformedText {
        val sb = StringBuilder
        text.text.forEachIndexed { index, c ->
            sb.append
            if  % 4 == 0 && index != text.text.lastIndex) sb.append
        }
        val transformed = sb.toString
        return TransformedText(
            text = AnnotatedString,
            offsetMapping = PhoneNumberOffsetMapping
        )
    }
}

class PhoneNumberOffsetMapping : OffsetMapping {
    override fun originalToTransformed: Int {
        // 每隔4位多了一个空格
        var extra = offset / 4
        if  extra--
        return offset + extra
    }
    override fun transformedToOriginal: Int {
        var countSpaces = offset /  // 一个组 + 一个空格
        if  == ) countSpaces-- // 在空格前不算空间
        return offset - countSpaces
    }
}

把这段放进 TextField 就Neng得到自动分组、无闪退的输入框：

@Composable
fun PhoneInput {
    var phone by remember { mutableStateOf }
    TextField(
       value = phone,
       onValueChange = { phone = it },
       visualTransformation = PhoneNumberVisualTransformation,
       placeholder = { Text },
       modifier = Modifier.fillMaxWidth.padding
   )
}

因为那样会导致两件事：

光标跳到末尾或乱跳；

需要维护两个状态，一个原始，一个Yi格式化，代码kan起来像一锅粥。

而 VisualTransformation 则只影响视图层面不污染底层数据，一行代码搞定。

1️⃣ 多字段联合校验 Ru果你有多个字段同时需要格式化，Ke以用同一个 OffsetMapping 类，但内部判断不同字段的位置即可。 2️⃣ 自定义颜色和字体 TextField 提供 colors 参数，你Ke以随心所欲地给占位符、错误提示dou设置不同颜色，让 UI geng有层次感。 3️⃣ 支持 Emoji 和富文本 AnnotatedString Ke以携带 SpanStyle，你Ke以在过滤函数里给特定字符添加颜色或粗体效果，让表情包也Neng整齐排列。 4️⃣ 性Neng注意事项 Ru果你的转换逻辑太复杂，记得在主线程外部跑一遍，然后再返回结果。Compose 对 recomposition hen敏感，一点小失误dou可Neng导致卡顿。

想要验证不同格式化策略对用户体验的影响吗？用 compose-test 库写几个测试场景，把点击、键入、删除等行为模拟下来kankan光标是否保持稳定。这样既省时又靠谱。

好了今天就聊到这里吧。Compose 的视觉转换功Neng真的hen强大，一旦掌握就Neng让所有表单dou优雅起來。不管你是新手还是资深工程师，只要记住：不要直接改字符串，要用 VisualTransformation 来Zuo“视图+映射”，光标自然不会乱跳，你也不必担心数据被篡改。

下次遇到类似需求，就跟我说一句：“我想让用户输入的时候自动加点符号”，我们一起玩转 Compose 吧！哈哈～ 🚀