1
resposta

Mascara Monetaria no compose

Se eu quisesse fazer uma mascara para colocar no meu textField do price para ir alterando para dinheiro enquanto eu digito, qual seria a melhor forma ?

1 resposta

Olá Lúcio!

Se você quiser adicionar uma máscara monetária ao seu TextField no Jetpack Compose, você pode usar a função VisualTransformation juntamente com a função replace para formatar o valor enquanto o usuário digita.

Aqui está um exemplo de como você pode fazer isso:

val price by remember { mutableStateOf("") }

val priceFormatter = VisualTransformation { textInputValue ->
    val rawString = textInputValue.text
    val formattedString = rawString.replace(Regex("[^\\d]"), "")
        .replace(Regex("(\\d{1,2})(\\d{2})$"), "$1,$2")
        .replace(Regex("(\\d+)(\\d{3})(\\d{2})$"), "$1.$2,$3")
    TransformedText(formattedString, textInputValue.selection)
}

TextField(
    value = price,
    onValueChange = { it: String ->
        price = it
    },
    visualTransformation = priceFormatter,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)

Nesse exemplo, usamos a função replace para substituir todos os caracteres não numéricos por uma string vazia. Em seguida, formatamos o valor adicionando vírgulas e pontos nos lugares corretos.

Dessa forma, o valor será formatado automaticamente enquanto o usuário digita.

Espero que isso ajude! Se tiver mais alguma dúvida, é só me dizer.

Espero ter ajudado e bons estudos!