如何将经过visualTransformation转换的TextField内容带格式存入数据库

visualTransformation属于界面渲染层的纯展示转换，仅会把你传入的原始文本状态转换成带格式的样式显示在输入框中，不会对绑定的text状态变量做任何修改，所以你直接读取text拿到的永远是用户输入的无分隔符原始数字。

根据你的存储需求选择对应方案即可：

方案1：数据库需要存储带/的日期格式 #

提交数据前，手动将8位原始数字转换为你需要的带分隔符格式即可，示例转换代码如下：

// 原始8位转XX/XX/XXXX格式
fun rawToFormattedDate(raw: String): String {
    if (raw.length != 8) return raw
    return "${raw.take(2)}/${raw.drop(2).take(2)}/${raw.drop(4)}"
}

// 提交数据库时调用
val dateToSave = rawToFormattedDate(text)
// 后续将dateToSave写入数据库即可

如果你希望text状态本身就保存带格式的内容，可以直接修改onValueChange逻辑，此时可以不用配置visualTransformation：

var text by remember { mutableStateOf("") }
TextField(
    value = text,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),
    onValueChange = { input ->
        // 过滤掉所有非数字字符
        val digits = input.filter { it.isDigit() }
        if (digits.length > 8) return@TextField
        // 构建带分隔符的格式
        val formatted = buildString {
            if (digits.isNotEmpty()) append(digits.take(2))
            if (digits.length > 2) append("/${digits.substring(2,4)}")
            if (digits.length > 4) append("/${digits.substring(4)}")
        }
        text = formatted
    }
)

方案2：数据库仅需要存储原始8位数字 #

不需要做额外修改，当前逻辑就符合要求。如果后续需要从数据库读取数据回显到输入框，直接把读取到的8位数字赋值给text状态即可，visualTransformation会自动将其转换为带/的格式渲染到界面上。

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