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 ?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
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 ?
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!