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

Answer 1

在我浏览了 Jetpack Compose 文档之后。我仍然不知道更好的方法来做到这一点，但我可能可以帮助您解决问题。我试图修复它以便它可以输入“。”并修复其他错误，例如无法在文本末尾输入 0 或错误的光标位置。

val NUMBER_REGEX = Regex("[-]?[\\d]*[.]?[\\d]*")

@Composable
fun NumberField(
    value: Number?,
    onNumberChange: (Number?) -> Unit
) {
    val number = remember { mutableStateOf(value) }
    var textState by remember { mutableStateOf(TextFieldValue()) } // Controls cursor selection
    var displayedText by remember(value != number.value) {
        number.value = value
        val doubleValue: Double? = value?.toDouble()
        val text = when {
            doubleValue == null -> ""
            doubleValue % 1.0 == 0.0 -> value.toInt().toString()
            else -> value.toString()
        }
        mutableStateOf(TextFieldValue(text = text, selection = textState.selection))
    }

    TextField(
        value = displayedText,
        onValueChange = { textFieldValue: TextFieldValue ->
            // Ignore ',' character in the number keyboard to avoid reset to zero
            // Fix cursor incorrectly after remove ","
            val commaCount = textFieldValue.text.count { it == ',' }
            textState = if (commaCount > 0) {
                val start = max(textFieldValue.selection.start - commaCount, 0)
                textFieldValue.copy(selection = TextRange(start, start))
            } else textFieldValue

            if (NUMBER_REGEX.matches(textFieldValue.text)) {
                displayedText = textFieldValue
                number.value = textFieldValue.text.toDoubleOrNull()
                onNumberChange(number.value)
            }

        },
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
    )
}

结果在这里

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

Answer 3

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

@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")
        }
    }
}

在 compose TextField 中格式化数字

3 个答案: