7

我正在尝试创建一个可重用的 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。”，不会解析为双精度数。我想让用户输入 5. 然后填写 rest。因此，我不想在小数点后自动添加零，因为这可能不是他们想要输入的下一个数字。这是最好的方法吗？我知道我可以接受任何文本，然后尝试将他们稍后输入的文本格式化为 int 或 double 并让他们修复它，只是认为将它们全部捆绑在可组合中会很好。

4

2 回答 2

2

你可以使用类似的东西：

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)
)

在此处输入图像描述

于 2021-05-30T20:42:35.270 回答
1

这是一个处理所有规定条件的实现，同时也将状态暴露给父母。

@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")
        }
    }
}
于 2021-05-31T18:04:35.253 回答