如何在jetpack compose中创建带有掩码的文本字段输入？答案

【问题标题】：How to create a text field input with mask in jetpack compose?如何在jetpack compose中创建带有掩码的文本字段输入？
【发布时间】：2021-11-02 22:18:27
【问题描述】：

我需要一个在 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
    )
}

【问题讨论】：

到目前为止你有什么尝试？
你好朋友，我刚刚用我的代码的 sn-p 更新了这个问题，EditTextField 是我的一个文本字段，我需要它来将此掩码应用于OutlinedTextField，即compose 的内部函数。

标签： android android-jetpack-compose android-jetpack-compose-text android-compose-textfield

【解决方案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)
}

【讨论】：

不错！您所做的似乎工作正常，尽管它是相对较大的代码。你知道使用正则表达式是否会有更紧凑的形式吗？

【解决方案2】：

实现接受任何类型的 Jetpack Compose TextField 掩码的 VisualTranformation：

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 == '#' }
}

【讨论】：