如何在Android Jetpack Compose TextField实现SWIFT/IFSC代码自动格式化

要实现输入第5位数字后自动插入-，并限制最终格式为XXXXX-XXX（X为数字）的功能，核心是通过自定义VisualTransformation控制显示格式，同时在onValueChange中处理输入的过滤、长度限制和自动插入逻辑，以下是具体实现步骤：

1. 自定义视觉转换（VisualTransformation） #

这个类负责将原始输入的数字转换为带-的显示格式，不修改实际输入值，仅改变UI展示：

class SwiftIfscVisualTransformation : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        val trimmed = if (text.length > 8) text.take(8) else text
        val formatted = buildString {
            trimmed.forEachIndexed { index, char ->
                append(char)
                // 第5位数字后插入-
                if (index == 4 && trimmed.length > 5) {
                    append('-')
                }
            }
            // 输入刚好5位时，也显示-引导后续输入
            if (trimmed.length == 5) {
                append('-')
            }
        }

        // 处理光标偏移，保证插入-后光标位置正确
        val offsetMapping = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int {
                return if (offset <= 5) offset else offset + 1
            }

            override fun transformedToOriginal(offset: Int): Int {
                return if (offset <= 5) offset else offset - 1
            }
        }

        return TransformedText(AnnotatedString(formatted), offsetMapping)
    }
}

2. 实现带格式化逻辑的TextField #

在Composable中用状态管理输入值，在onValueChange中过滤非数字字符、限制长度，确保输入符合规则：

@Composable
fun FormattedSwiftIfscTextField() {
    val inputValue = remember { mutableStateOf("") }

    TextField(
        value = inputValue.value,
        onValueChange = { newText ->
            // 过滤所有非数字字符
            val digitsOnly = newText.filter { it.isDigit() }
            // 限制最多8位数字（5位前缀+3位后缀）
            val limitedDigits = if (digitsOnly.length > 8) digitsOnly.take(8) else digitsOnly
            inputValue.value = limitedDigits
        },
        visualTransformation = SwiftIfscVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        placeholder = { Text("输入如23456-232") },
        maxLines = 1
    )
}

关键细节说明 #

• 输入过滤：确保用户只能输入数字，避免非数字字符干扰格式化逻辑
• 长度限制：限制总数字长度为8位，对应显示格式的XXXXX-XXX
• 光标位置处理：OffsetMapping保证插入-后光标不会跳错位置，删除操作也能正常响应
• 分离显示与实际值：原始输入值始终保持纯数字，方便后续业务处理，仅UI层展示带-的格式化样式

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