如何在Jetpack Compose中创建带有掩码的文本字段输入？

Question

我需要一个在Jetpack Compose中使用掩码的文本输入框，类似于这样：NNNNN-NNN，其中N是0到9之间的整数。我需要我的组合函数在OutlinedTextField中有这个掩码：

@Composable
private fun EditTextField(
    labelText: String,
    value: String,
    keyboardType: KeyboardType = KeyboardType.Text,
    onValueChanged: (String) -> Unit
) {
    OutlinedTextField(
        modifier = Modifier.padding(top = 8.dp),
        label = { Text(text = labelText) },
        keyboardOptions = KeyboardOptions(keyboardType = keyboardType),
        value = value,
        onValueChange = onValueChanged
    )
}

- Pierre Vieira

---

你到目前为止尝试过什么了？ - AgentP

你好，朋友。我刚刚更新了问题，并放置了我的代码片段。EditTextField是我创建的一个文本框，我需要将这个掩码应用于Compose内部函数OutlinedTextField中。 - Pierre Vieira

Answer 1

你可以使用 visualTransformation 属性：

OutlinedTextField(
    value = text,
    onValueChange = { it ->
        text = it.filter { it.isDigit() }
    },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    visualTransformation = MaskTransformation()
)

使用：

class MaskTransformation() : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        return maskFilter(text)
    }
}


fun maskFilter(text: AnnotatedString): TransformedText {

    // NNNNN-NNN
    val trimmed = if (text.text.length >= 8) text.text.substring(0..7) else text.text
    var out = ""
    for (i in trimmed.indices) {
        out += trimmed[i]
        if (i==4) out += "-"
    }

    val numberOffsetTranslator = object : OffsetMapping {
        override fun originalToTransformed(offset: Int): Int {
            if (offset <= 4) return offset
            if (offset <= 8) return offset +1
            return 9

        }

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

    return TransformedText(AnnotatedString(out), numberOffsetTranslator)
}

- Gabriele Mariotti

---

不错！你所做的似乎很好，尽管代码相对较大。你知道是否可以使用正则表达式来使其更紧凑吗？ - Pierre Vieira

Answer 2

实现VisualTransformation，使其可以接受Jetpack Compose TextField中的任何类型的掩码：

class MaskVisualTransformation(private val mask: String) : VisualTransformation {

    private val specialSymbolsIndices = mask.indices.filter { mask[it] != '#' }

    override fun filter(text: AnnotatedString): TransformedText {
        var out = ""
        var maskIndex = 0
        text.forEach { char ->
            while (specialSymbolsIndices.contains(maskIndex)) {
                out += mask[maskIndex]
                maskIndex++
            }
            out += char
            maskIndex++
        }
        return TransformedText(AnnotatedString(out), offsetTranslator())
    }

    private fun offsetTranslator() = object : OffsetMapping {
        override fun originalToTransformed(offset: Int): Int {
            val offsetValue = offset.absoluteValue
            if (offsetValue == 0) return 0
            var numberOfHashtags = 0
            val masked = mask.takeWhile {
                if (it == '#') numberOfHashtags++
                numberOfHashtags < offsetValue
            }
            return masked.length + 1
        }

        override fun transformedToOriginal(offset: Int): Int {
            return mask.take(offset.absoluteValue).count { it == '#' }
        }
    }
}

如何使用它：

@Composable
fun CustomTextField() {
    var text by remember { mutableStateOf("") }
    OutlinedTextField(
        value = text,
        onValueChange = { it ->
            if (it.length <= INPUT_LENGTH) {
                text = it.filter { it.isDigit() }
            }
        },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        visualTransformation = MaskVisualTransformation(MASK)
    )
}

object NumberDefaults {
    const val MASK = "#####-###"
    const val INPUT_LENGTH = 8 // Equals to "#####-###".count { it == '#' }
}

- Thiago Souza

---

这是每个人都应该使用的答案。更加灵活的解决方案。 - spierce7

如何按特定顺序排列所有数字和字母，例如"AA1111A"？ - undefined