如何在Jetpack Compose中实现带掩码效果的OutlinedTextField输入框？

核心逻辑通过输入内容实时过滤、格式化实现，无需引入第三方依赖，直接改造原有EditTextField可组合函数即可生效。

实现步骤 #

• 新增输入格式化工具函数，负责过滤非数字字符、自动补充分隔符、截断超长内容
• 修改OutlinedTextField的onValueChange回调，先格式化原始输入再对外回调
• 默认调整键盘类型为数字键盘，降低无效输入概率

完整代码实现 #

输入格式化工具函数 #

private fun formatMaskedInput(input: String): String {
    // 过滤所有非数字字符
    val validDigits = input.filter { it.isDigit() }
    // 最多保留8位有效数字（5位前缀+3位后缀）
    val limitedDigits = validDigits.take(8)
    return when {
        limitedDigits.length <= 5 -> limitedDigits
        else -> "${limitedDigits.take(5)}-${limitedDigits.drop(5)}"
    }
}

修改后的EditTextField可组合函数 #

@Composable
private fun EditTextField(
    labelText: String,
    value: String,
    keyboardType: KeyboardType = KeyboardType.Number,
    onValueChanged: (String) -> Unit
) {
    OutlinedTextField(
        modifier = Modifier.padding(top = 8.dp),
        label = { Text(text = labelText) },
        keyboardOptions = KeyboardOptions(keyboardType = keyboardType),
        value = value,
        onValueChange = { rawInput ->
            val formattedValue = formatMaskedInput(rawInput)
            onValueChanged(formattedValue)
        },
        singleLine = true
    )
}

调用示例 #

var maskedValue by remember { mutableStateOf("") }
EditTextField(
    labelText = "掩码输入框",
    value = maskedValue,
    onValueChanged = { maskedValue = it }
)

支持特性 #

• 自动过滤字母、符号等非数字输入
• 输入满5位数字后自动插入分隔符-，无需用户手动输入
• 自动截断超出8位的数字输入，保证格式严格符合NNNNN-NNN规则
• 删除输入时自动处理分隔符，删到不足5位数字时分隔符自动消失

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