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:
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
- 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") } ) }
@Composable fun SimpleOutlinedTextFieldSample() { var text by remember { mutableStateOf("") } OutlinedTextField( value = text, onValueChange = { text = it }, label = { Text("Label") } ) }
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) ) }
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) )
![Verwenden von buildAnnotatedString und SpanStyle in Verbindung mit linearGradient, um nur einen Textabschnitt anzupassen.](https://developer.android.com/static/develop/ui/compose/images/text-textfieldgradient.gif?authuser=9&hl=de)
buildAnnotatedString
und SpanStyle
zusammen mit linearGradient
, um nur einen Teil des Textes anzupassen.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) ) }
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' } } ) }
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 StatusTextField
darzustellen: Vermeiden Sie mit reaktiven Streams wieStateFlow
,TextField
, da diese Strukturen asynchrone Verzögerungen verursachen können.
class SignUpViewModel : ViewModel() { var username by mutableStateOf("") private set /* ... */ }
- 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) } /*...*/ ) }
- Definition: Wenn in Ihrem
TextField
-Bundesstaat Unternehmen Logikvalidierungen während der Eingabe geben, ist es richtig, den Zustand auf IhreViewModel
. 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