Jetpack Compose（MVVM模式）下文本组件中可空价格数值的处理优化方案咨询

我来帮你一步步梳理并解决这些问题，咱们从核心痛点入手，逐个优化你的实现：

一、先修复ViewModel的业务逻辑问题 #

你的现有逻辑存在参数类型不匹配、非法输入处理粗糙、0值未映射为null的问题，先把这部分捋顺：

// 修正参数类型为String（TextField的onValueChange本来就传String）
fun onProductPriceChange(input: String) {
    val trimmedInput = input.trim()
    when {
        // 空输入直接设为null
        trimmedInput.isEmpty() -> {
            _viewState.value = _viewState.value.copy(price = null)
        }
        // 把0/0.0视为无值，同步设为null
        trimmedInput in listOf("0", "0.0", "0.") -> {
            _viewState.value = _viewState.value.copy(price = null)
        }
        else -> {
            try {
                // 用toDoubleOrNull替代try-catch更简洁
                trimmedInput.toDoubleOrNull()?.let { validPrice ->
                    _viewState.value = _viewState.value.copy(price = validPrice)
                }
                // 非法输入时不更新状态，保持原有价格（避免用户输入错误时内容跳变）
            } catch (e: Exception) {
                // 可选：添加Toast提示用户输入无效
            }
        }
    }
}

二、重构VisualTransformation（解决光标错乱与显示格式问题） #

你之前的实现最大问题是OffsetMapping用了Identity，当转换前后字符串长度变化时（比如10.0转10），光标位置会完全错乱，这就是删除时出现异常行为的核心原因。下面是修复后的版本：

class PriceVisualTransformation : VisualTransformation {
    override fun filter(text: AnnotatedString): TransformedText {
        val originalText = text.text
        val transformedText = buildTransformedString(originalText)

        return TransformedText(
            AnnotatedString(transformedText),
            createOffsetMapping(originalText, transformedText)
        )
    }

    // 处理显示格式：整数显示为10，小数保留有效位数（比如10.500→10.5）
    private fun buildTransformedString(original: String): String {
        return when {
            original.isEmpty() -> ""
            original.toDoubleOrNull() == null -> original // 保留非法输入，让用户看到错误
            else -> {
                val value = original.toDouble()
                if (value % 1 == 0.0) {
                    value.toInt().toString()
                } else {
                    // 去掉末尾多余的0和小数点
                    value.toString().trimEnd('0').trimEnd('.').takeIf { it.isNotEmpty() } ?: "0"
                }
            }
        }
    }

    // 核心：构建正确的光标映射关系
    private fun createOffsetMapping(original: String, transformed: String): OffsetMapping {
        return object : OffsetMapping {
            override fun originalToTransformed(offset: Int): Int {
                // 原字符串光标位置 → 转换后字符串的位置
                val originalSub = original.substring(0, offset)
                return buildTransformedString(originalSub).length
            }

            override fun transformedToOriginal(offset: Int): Int {
                // 转换后字符串光标位置 → 原字符串的位置
                var transformedCount = 0
                var originalIndex = 0

                while (originalIndex < original.length && transformedCount < offset) {
                    val currentChar = original[originalIndex]
                    // 判断当前字符是否会被转换掉（比如末尾的0或小数点）
                    val isRedundantChar = original.substring(originalIndex).run {
                        toDoubleOrNull()?.let { it % 1 == 0.0 } == true && (currentChar == '0' || currentChar == '.')
                    }
                    if (!isRedundantChar) transformedCount++
                    originalIndex++
                }
                return originalIndex
            }
        }
    }
}

三、优化UI层代码（避免状态重复收集） #

你的UI代码多次调用vm.viewState.collectAsState()，会导致状态读取不一致，同时要处理0值显示为空的需求：

// 提取viewState变量，避免重复收集状态
val viewState by vm.viewState.collectAsState()

OutlinedTextField(
    value = viewState.price?.let { price ->
        // 0.0视为无值，显示为空
        if (price == 0.0) "" else price.toString()
    } ?: "",
    onValueChange = { vm.onProductPriceChange(it) },
    label = { Text(stringResource(id = R.string.price)) },
    keyboardOptions = KeyboardOptions(
        capitalization = KeyboardCapitalization.None,
        autoCorrect = false, // 数字输入不需要自动纠正
        keyboardType = KeyboardType.Decimal // 用Decimal类型，原生支持小数点输入
    ),
    visualTransformation = PriceVisualTransformation(),
    // 添加输入过滤器，从源头限制非法输入（只能输入数字和一个小数点）
    filters = listOf(
        InputFilter { source, _, _, dest, _, _ ->
            val newText = dest + source
            if (newText.isEmpty() || newText.matches(Regex("^\\d*\\.?\\d*$"))) source else ""
        }
    ),
    singleLine = true,
    maxLines = 1
)

四、各问题的解决说明 #

1. 非法输入处理：通过输入过滤器限制只能输入数字和小数点，ViewModel对非法输入不更新状态，避免内容跳变；
2. 整数显示格式：VisualTransformation自动将10.0转换为10显示，同时保留小数的有效位数；
3. 删除异常行为：修复了OffsetMapping的光标映射问题，同时UI层只收集一次状态，彻底解决删除时光标错乱、数值跳变的问题；
4. 恢复null值：输入空字符串或0/0.0时，ViewModel自动将price设为null，UI显示为空，满足无值需求。

内容的提问来源于stack exchange，提问作者oursgris