Как замаскировать TextField, чтобы показать формат даты dd / mm / yyyy в Jetpack Compose? [дубликат]

Question

Как с помощью Jetpack Compose отформатировать значение TextField в соответствии с форматом «дд / мм / гггг»?

Answer 1

Подобно тому, как Jetpack Compose предлагает визуальное преобразование пароля, мы можем выполнять собственное визуальное преобразование.

      class DateTransformation : VisualTransformation {

    // XX/XX/XXXX format
    override fun filter(text: AnnotatedString): TransformedText {
        var out = ""
        text.text.forEachIndexed { index, char ->
            when (index) {
                2 -> out += "/$char"
                4 -> out += "/$char"
                else -> out += char
            }
        }
        val numberOffsetTranslator = object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int {
                if (offset <= 2) return offset
                if (offset <= 4) return offset + 1
                return offset + 2
            }

            override fun transformedToOriginal(offset: Int): Int {
                if (offset <= 2) return offset
                if (offset <= 5) return offset - 1
                return offset - 2
            }
        }
        return TransformedText(AnnotatedString(out), numberOffsetTranslator)
    }
}

Мы возвращаем TransformedText с примененным фильтром и OffsetMapping, который выполняет перевод между исходным и преобразованным текстом.

Теперь мы можем использовать наш класс VisualTransformation в любом TextField.

      var text by remember { mutableStateOf("") }
TextField(
    value = text,
    visualTransformation = DateTransformation(),
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    onValueChange = {
        if (it.length < 9) text = it
    }
)