如何在compose中的TextField中使用逗号格式化数字

Question

如何在compose中的TextField中用逗号格式化数字。

示例：1234567899->123,456,789,9

Answer 1

最好的方法是使用visualTransformation

示例

@Composable
fun CurrencyTextField(
onValueChange: (String) -> Unit,
) {
var text by remember { mutableStateOf("") }
BasicTextField(
value = text,
onValueChange = { newText: String ->
if (newText.length <= Long.MAX_VALUE.toString().length && newText.isDigitsOnly()) {
text = newText
onValueChange(newText)
}
},
keyboardOptions = KeyboardOptions.Default.copy(
keyboardType = KeyboardType.Number,
),
visualTransformation = NumberCommaTransformation(),
)
}
// format long to 123,456,789,9
class NumberCommaTransformation : VisualTransformation {
override fun filter(text: AnnotatedString): TransformedText {
return TransformedText(
text = AnnotatedString(text.text.toLongOrNull().formatWithComma()),
offsetMapping = object : OffsetMapping {
override fun originalToTransformed(offset: Int): Int {
return text.text.toLongOrNull().formatWithComma().length
}
override fun transformedToOriginal(offset: Int): Int {
return text.length
}
}
)
}
}
fun Long?.formatWithComma(): String =
NumberFormat.getNumberInstance(Locale.US).format(this ?: 0)