撰写 TextField 显示奇怪的行为

Question

我正在尝试实现一个 TextField，它输入一个数量并在键入后立即对其进行格式化，并将其限制为 100,000。

@Composable
fun MainScreen(
    viewModel: MyViewModel
) {
    val uiState by viewModel.uiState.collectAsState()
    Column {
        AmountSection(
            uiState.amount,
            viewModel::updateAmount
        )
        Text(text = viewModel.logs)
    }
}

@Composable
fun AmountSection(
    amount: TextFieldValue,
    updateAmount: (TextFieldValue) -> Unit
) {
    BasicTextField(
        value = amount,
        onValueChange = updateAmount,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number
    )
)

MyViewModel：

class MyViewModel: ViewModel() {

    private val _uiState = MutableStateFlow(MyUiState())
    val uiState: StateFlow<MyUiState> = _uiState

    var logs by mutableStateOf("")
    var text = ""

    fun updateAmount(amount: TextFieldValue) {
        val formattedAmount: String = amount.text.getFormattedAmount()
        text += "input = ${amount.text}\n"
        text += "output = $formattedAmount \n"
        logs = text
        _uiState.update {
            it.copy(amount = TextFieldValue(formattedAmount, TextRange(formattedAmount.length))
        }
    }    
}

data class MyUiState(val amount: TextFieldValue = TextFieldValue())

（logs 和 text 仅用于记录目的。发现很难共享 logcat 输出，因此以这种方式呈现）

结果：

• 当我按 6 时，输入是预期的“12,3456”（忽略货币）
• 我的getFormattedAmount() 函数将最后六个删除为 (123456 > 100000)。它输出“12,345”，这也是正确的。屏幕上显示的是“12,345”。
• 但是当我按 7 时，我得到输入“12,34567”。那个6是哪里来的？？它不在uiState.amount 中。

（请忽略最后一个输出行。getFormattedAmount 仅在数量超过限制时删除最后一个字符，并且它给出了错误的输出，因为它没有预料到那个输入）

我觉得我在这里犯了一些非常愚蠢的错误，如果有人能帮助我找出答案，我将非常感激。

Answer 1

根据编辑进行编辑：- 从问题的外观来看，您希望在这里实现什么并不是很清楚，但这是我的推论 - 您只需要一个允许输入数字的 TextField，但只能输入最大值（VALUE，而不是字符）。当用户按下数字导致值超过您的最大值时，您当然希望不输入该数字，但您希望在这种情况下完全不反映任何变化，即字段值应保持不变。

根据上面的推论，下面是一个例子：-

首先，你的 uiState 变量。为了清楚起见，我保持简单。

class VM: ViewModel(){
 var fieldValue by mutableStateOf("")
 
 fun onFieldUpdate(newValue){
   if(newValue.toDouble() > 999999999999999)
   return
   else
   fieldValue = newValue
 }
}

@Composable
fun CrazyField(fieldValue: String, onFieldUpdate: (String) -> Unit){
 TextField(value = fieldValue, onValueChange = onFieldUpdate)
}

如果没有实际运行，请勿进一步评论。

原答案：- 使用双精度解析器。

var text by remember { mutableStateOf("") }
TextField(
    value = text,
    onValueChange = {
        if (it.toDouble() <= 100000)
            text = it //Based on your use-case - it won't cut off text or limit the amount of characters
       else text = it.subString(0,7) //In-case of pasting or fast typing
    },
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)

Answer 2

在 Sean 的 Compose slack 频道上找到 this 评论。

作为一个模型，你应该假设键盘可以任意和大 编辑每个onValueChange。例如，如果用户使用 自动更正，用表情符号替换单词或其他智能编辑功能。到 正确处理这个问题，编写任何转换逻辑，假设 传递给onValueChange 的当前文本与上一个或下一个无关 将传递给 onValueChange 的值。

所以这是 TextField 和 IME 关系的一些问题。
我重写了我的getFormattedAmount 函数来格式化给定的字符串，而不做任何假设（之前假设金额被格式化到最后第二个字符）。现在一切似乎都已解决。