如何在Jetpack Compose TextField中获取VisualTransformation转换值（无回调）

直接基于TextField的原始输入值自行解析转换，不需要依赖VisualTransformation的回调，具体实现方式如下：

1. 编写原始输入解析函数 #

CurrencyAmountInputVisualTransformation的核心是把纯数字的原始输入格式化为带千分位、小数点的显示文本，我们可以反向实现解析逻辑，从纯数字字符串中提取出带小数点的标准数值：

fun parseRawInputToCurrencyValue(rawInput: String, decimalDigits: Int = 2): String {
    // 过滤所有非数字字符，确保输入仅保留数字
    val cleanedInput = rawInput.filter { it.isDigit() }
    if (cleanedInput.isEmpty()) return "0.00"

    // 根据指定小数位数拆分整数与小数部分
    val integerPart = if (cleanedInput.length <= decimalDigits) {
        "0"
    } else {
        cleanedInput.substring(0, cleanedInput.length - decimalDigits)
    }
    // 小数部分不足指定位数时补0，保证格式统一
    val decimalPart = cleanedInput.takeLast(decimalDigits).padEnd(decimalDigits, '0')
    return "$integerPart.$decimalPart"
}

2. 在TextField中集成解析逻辑 #

只维护一个原始输入的可变状态，通过派生状态计算转换后的值，彻底避免重复重组：

@Composable
fun CurrencyInputField() {
    var rawInput by remember { mutableStateOf("") }
    // 用derivedStateOf优化计算逻辑，仅当rawInput变化时重新生成结果
    val currencyValue by remember(rawInput) {
        derivedStateOf { parseRawInputToCurrencyValue(rawInput) }
    }

    TextField(
        value = rawInput,
        onValueChange = { newInput ->
            // 实时过滤非数字输入，确保rawInput始终为纯数字格式
            rawInput = newInput.filter { it.isDigit() }
        },
        visualTransformation = CurrencyAmountInputVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
        label = { Text("输入金额") }
    )

    // 直接使用转换后的值，无需依赖回调
    Text(text = "转换后金额：$currencyValue")
}

3. 方案优势 #

• 仅维护一个可变状态rawInput，消除了回调更新第二个状态引发的重复重组问题。
• 转换后的值currencyValue是派生状态，Compose会自动跟踪依赖，仅在rawInput变化时重新计算，性能更优。
• 解析逻辑与CurrencyAmountInputVisualTransformation的格式逻辑完全对齐，输出结果和回调方式一致。

内容的提问来源于stack exchange，提问作者mark.t