Nutzereingaben verarbeiten

In TextField können Nutzer Text eingeben und ändern. Auf dieser Seite wird beschrieben, wie Sie kann TextField implementieren, die TextField-Eingabe formatieren und konfigurieren andere TextField-Optionen, z. B. Tastaturoptionen und visuelle Transformation Nutzereingabe.

TextField-Implementierung auswählen

Es gibt zwei Ebenen der TextField-Implementierung:

1. TextField ist die Material Design-Implementierung. Wir empfehlen Ihnen, dieser Implementierung entsprechend dem Material Design Richtlinien: <ph type="x-smartling-placeholder">
   </ph>
   • Der Standardstil ist gefüllt.
   • OutlinedTextField ist der/die/das Gliederung Stilversion
2. Mit BasicTextField können Nutzer Text über Hard- oder Software bearbeiten Tastatur, aber bietet keine Elemente wie Hinweise oder Platzhalter.

@Composable
fun SimpleFilledTextFieldSample() {
    var text by remember { mutableStateOf("Hello") }

    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
TextSnippets.kt

@Composable
fun SimpleOutlinedTextFieldSample() {
    var text by remember { mutableStateOf("") }

    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Label") }
    )
}
TextSnippets.kt

Stil-TextField-

Für TextField und BasicTextField gibt es viele gemeinsame Parameter, die angepasst werden können . Die vollständige Liste für TextField ist in der TextField-Quelle verfügbar Code hinzu. Im Folgenden finden Sie eine unvollständige Liste einiger nützlicher Parameter:

• singleLine
• maxLines
• textStyle

@Composable
fun StyledTextField() {
    var value by remember { mutableStateOf("Hello\nWorld\nInvisible") }

    TextField(
        value = value,
        onValueChange = { value = it },
        label = { Text("Enter text") },
        maxLines = 2,
        textStyle = TextStyle(color = Color.Blue, fontWeight = FontWeight.Bold),
        modifier = Modifier.padding(20.dp)
    )
}
TextSnippets.kt

Wir empfehlen TextField über BasicTextField, wenn Ihr Design einen Material TextField oder OutlineTextField. BasicTextField sollte jedoch verwendet werden, wenn Sie Designs erstellen, die die Dekorationen aus der Materialspezifikation nicht benötigen.

Eingabe mit der Brush API gestalten

Mit der Brush API kannst du erweiterte Stile in TextField nutzen. Die Im folgenden Abschnitt wird beschrieben, wie Sie mit einem Pinsel einen farbigen Farbverlauf hinzufügen können. bis TextField-Eingabe.

Weitere Informationen zur Verwendung der Brush API zum Gestalten von Text finden Sie unter Erweiterte Stile mit der Brush API aktivieren

Farbverläufe mit TextStyle implementieren

Um während der Eingabe in einem TextField einen Farbverlauf zu implementieren, legen Sie den Pinsel fest als TextStyle für Ihr TextField. In diesem Beispiel verwenden wir integrierten Pinsel mit linearGradient, um den Farbverlaufseffekt als Text wird in den TextField eingegeben.

var text by remember { mutableStateOf("") }
val brush = remember {
    Brush.linearGradient(
        colors = rainbowColors
    )
}
TextField(
    value = text, onValueChange = { text = it }, textStyle = TextStyle(brush = brush)
)
TextSnippets.kt

<ph type="x-smartling-placeholder">

</ph>

Tastaturoptionen festlegen

Mit TextField können Sie Optionen für die Tastaturkonfiguration festlegen, z. B. die Tastatur oder die Autokorrektur aktivieren, wenn diese von der Tastatur unterstützt wird. Einige Optionen können möglicherweise nicht garantiert werden, wenn die Softwaretastatur nicht den Optionen, die hier zur Verfügung stehen. Hier ist die Liste der unterstützten Tastaturen Optionen:

• capitalization
• autoCorrect
• keyboardType
• imeAction

Eingabe formatieren

Mit TextField können Sie Folgendes festlegen: VisualTransformation auf den Eingabewert, z. B. Ersetzen Sie Zeichen durch * für Passwörter oder Einsetzen von Bindestrichen alle 4 Ziffern für eine Kreditkartennummer:

@Composable
fun PasswordTextField() {
    var password by rememberSaveable { mutableStateOf("") }

    TextField(
        value = password,
        onValueChange = { password = it },
        label = { Text("Enter password") },
        visualTransformation = PasswordVisualTransformation(),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password)
    )
}
TextSnippets.kt

Weitere Beispiele findest du im VisualTransformationSamples-Quellcode.

Eingabe bereinigen

Eine gängige Aufgabe bei der Textbearbeitung ist das Entfernen von führenden Zeichen oder den Eingabestring bei jeder Änderung transformieren.

Als Modell sollten Sie davon ausgehen, dass die Tastatur willkürlich und groß bearbeitet jeden onValueChange. Das kann zum Beispiel passieren, wenn Nutzende Autokorrektur, das Ersetzen von Wörtern durch ein Emoji oder andere intelligente Bearbeitungsfunktionen. Bis richtig verarbeitet, jede Transformationslogik in der Annahme, dass Der aktuelle an onValueChange übergebene Text steht in keinem Zusammenhang mit dem vorherigen oder nächsten -Werte, die an onValueChange übergeben werden.

Um ein Textfeld zu implementieren, das keine führenden Nullen zulässt, können Sie alle führenden Nullen bei jeder Wertänderung entfernt werden.

@Composable
fun NoLeadingZeroes() {
    var input by rememberSaveable { mutableStateOf("") }
    TextField(
        value = input,
        onValueChange = { newText ->
            input = newText.trimStart { it == '0' }
        }
    )
}
TextSnippets.kt

Um die Cursorposition beim Bereinigen von Text zu steuern, verwenden Sie den TextFieldValue Überlastung von TextField als Teil des Bundesstaates.

Best Practices mit Status

Im Folgenden finden Sie eine Reihe von Best Practices zum Definieren und Aktualisieren von TextField um Eingabeprobleme in der App zu vermeiden.

• Verwenden Sie MutableState, um den Status TextField darzustellen: Vermeiden Sie mit reaktiven Streams wie StateFlow, TextField, da diese Strukturen asynchrone Verzögerungen verursachen können.

class SignUpViewModel : ViewModel() {

    var username by mutableStateOf("")
        private set

    /* ... */
}
TextSnippets.kt

• Verzögerungen bei der Aktualisierung des Status vermeiden: Aktualisieren Sie beim Aufrufen von onValueChange TextField synchron und sofort ausführen:

// SignUpViewModel.kt

class SignUpViewModel(private val userRepository: UserRepository) : ViewModel() {

    var username by mutableStateOf("")
        private set

    fun updateUsername(input: String) {
        username = input
    }
}

// SignUpScreen.kt

@Composable
fun SignUpScreen(/*...*/) {

    OutlinedTextField(
        value = viewModel.username,
        onValueChange = { username -> viewModel.updateUsername(username) }
        /*...*/
    )
}
TextSnippets.kt

• Definition: Wenn in Ihrem TextField-Bundesstaat Unternehmen Logikvalidierungen während der Eingabe geben, ist es richtig, den Zustand auf Ihre ViewModel. Ist dies nicht der Fall, können Sie zusammensetzbare Funktionen oder eine State Holder-Klasse als die „Source of Truth“. Weitere Informationen darüber, wo du deinen Zustand heben kannst, findest du in der Status der Winden.

Empfehlungen für dich

• Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
• Benutzeroberfläche für das Schreiben erstellen
• State und Jetpack Compose
• UI-Status in „Compose“ speichern