在Compose TextField中格式化数字

Question

我正在尝试创建一个可重用的NumberField组件：

@Composable
fun NumberField(
  value: Number?,
  onNumberChange: (Number) -> Unit,
) {
  TextField(
    value = value?.toString() ?: "",
    onValueChange = {
      it.toDoubleOrNull()?.let { value ->
        if (value % 1.0 == 0.0) {
          onNumberChange(value.toInt())
        } else {
          onNumberChange(value)
        }
      }
    },
    singleLine = true,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
  )
}

用作：

@Composable
fun NumberContent() {
  val number = remember { mutableStateOf<Number?>(null) }

  NumberField(value = number.value) {
    number.value = it
  }
}

我希望数字根据用户输入的内容为Int或Double类型。上面的代码在输入小数时无法正常工作，例如"5."无法解析为double类型。我想允许用户先输入5.，再继续输入其余内容。因此，我不想自动在小数点后面添加一个零，因为可能并不是他们想要输入的下一个数字。这是最好的方法吗？我知道我可以接受任何文本，然后稍后尝试将其格式化为int或double，并要求用户进行修复，但只需在组件中捆绑所有内容似乎更好。

- lostintranslation

---

问题不够清晰。当用户输入 5. 时，您想要显示什么？ - Gabriele Mariotti

我想要显示5。 - lostintranslation

说实话，我不明白你想要实现什么（如果用户输入“5.”，默认字段只会显示“5.”）。无论如何，请勿使用“onValueChange”，而是使用“visualTrasformation”。 - Gabriele Mariotti

我想限制仅输入数字。如果用户键入5.Urdu，那是无效的，他们不应该能够输入。或者5.74.64.62或&@。我希望将字段限制为仅数字、整数和双精度浮点数。 - lostintranslation

Answer 1

您可以使用类似以下的方式：

TextField(
    value = text,
    onValueChange = {
        if (it.isEmpty()){
            text = it
        } else {
            text = when (it.toDoubleOrNull()) {
                null -> text //old value
                else -> it   //new value
            }
        }
    },
    singleLine = true,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)

- Gabriele Mariotti

---

太棒了！只需在新值中添加.trim()，以避免空格。 - undefined

Answer 2

这里是一个实现，它处理了所有声明的条件，并向父级公开状态。

@Composable
fun NumberField(
    value: Number?,
    onNumberChange: (Number?) -> Unit,
) {
    val number = remember { mutableStateOf(value) }
    val textValue = remember(value != number.value) {
        number.value = value
        mutableStateOf(value?.toDouble()?.let {
            if (it % 1.0 == 0.0) {
                it.toInt().toString()
            } else {
                it.toString()
            }
        } ?: "")
    }

    val numberRegex = remember { "[-]?[\\d]*[.]?[\\d]*".toRegex() }
    // for no negative numbers use "[\d]*[.]?[\d]*"

    TextField(
        value = textValue.value,
        onValueChange = {
            if (numberRegex.matches(it)) {
                textValue.value = it
                number.value = it.toDoubleOrNull()
                onNumberChange(number.value)
            }
        },
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
    )
}

下面是一个示例用法。

@Composable
fun DemoUsage() {
    Column {
        val number = remember { mutableStateOf<Number?>(null) }
        
        NumberField(value = number.value) {
            number.value = it
        }

        Button(onClick = { number.value = number.value?.toDouble()?.plus(1) }) {
            Text("Increment")
        }
    }
}

- Om Kumar