Wie implementiert man eine benutzerdefinierte maskierte Eingabe mit festem Präfix in Jetpack Compose BasicTextField? ⇐ Android

[Guest]

Ich möchte eine visuelle Transformation auf ein BasicTextField in Jetpack Compose anwenden. Ich habe Code ausprobiert, stehe aber vor mehreren Problemen. Beispielsweise bleibt der Cursor nicht an der richtigen Position und wenn die Rücktaste gedrückt wird, bewegt sich der Cursor an die falsche Stelle.
Ich benötige das BasicTextField, um immer eine bestimmte Zeichenfolge anzuzeigen (z. B. , „ABC-“), die auch mit der Rücktaste oder Löschaktionen nicht entfernt werden kann. Außerdem möchte ich die Eingabe einschränken und eine Maskierung anwenden, um den Text wie folgt zu formatieren: „ABC-1234-2345-6366“.
Könnte mir jemand helfen, dies richtig umzusetzen?

Code: Select all

@Preview(showBackground = true)
@Composable
private fun SampleTextFieldView() {
var textFieldValue by remember { mutableStateOf(TextFieldValue("ABC-")) }
BasicFieldView(
textFieldValue,
onValueChange = { onValueChange ->
val digitOnly = onValueChange.text.filter { it.isDigit() }
val formattedString = buildString {
append("Abc-")
digitOnly.forEachIndexed { index, digit ->
if (index % 4 == 0 && index !=0 ){
append("-")
}
append(digit)
}
}
textFieldValue = onValueChange.copy(formattedString)
}
)
}

@Composable
fun BasicFieldView(
textFieldValue: TextFieldValue,
onValueChange: (TextFieldValue) -> Unit,
) {
Column(
modifier = Modifier.fillMaxSize()
) {
BasicTextField(
modifier = Modifier.fillMaxWidth(),
value = textFieldValue,
onValueChange = {
onValueChange(it)
},
)
}
}