Android Academy · Lektion

TextField og brugerinput

Indfang tekst fra brugeren i Compose.

Lektion 1 af 413 trin

TextField og brugerinput er en gratis Android Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Android Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Android Academy-kurset indeholder 4 lektioner i alt.

Håndtering af brugerens indtastning

Næsten alle rigtige apps har brug for at bede brugeren om noget: et navn, en e-mailadresse eller en søgeforespørgsel. I Jetpack Compose er byggestenen til tekstindtastning TextField.

I denne lektion lærer du at vise et tekstfelt, læse det, brugeren skriver, og holde feltet synkroniseret med appens tilstand. Det er grundlaget for alle formularer, du kommer til at opbygge.

Dit første TextField

Et TextField har brug for to ting: en value (den aktuelle tekst, der skal vises) og et onValueChange-tilbagekald (hvad der skal ske, når brugeren skriver).

Compose er deklarativt, så feltet gemmer ikke selv sin tekst. Du gemmer teksten i en tilstand og giver den tilbage til feltet. Dette mønster kaldes tilstandsløftning.

@Composable
fun NameField() {
    var name by remember { mutableStateOf("") }

    TextField(
        value = name,
        onValueChange = { name = it }
    )
}

Sådan fungerer værdikredsløbet

Den vigtigste pointe er, at et TextField viser præcis det, du giver til value. Når brugeren trykker på en tast, kalder Compose onValueChange med den nye tekst.

Du gemmer den nye tekst i tilstanden.
Ændringer i tilstanden udløser rekomposition.
Feltet tegnes igen med den opdaterede value.

Hvis du glemmer at opdatere tilstanden i onValueChange, ser feltet fastlåst ud, fordi value aldrig ændres.

var name by remember { mutableStateOf("") }

TextField(
    value = name,
    onValueChange = { newText -> name = newText }
)

Tilføjelse af etiket og pladsholder

Et ubearbejdet tekstfelt giver brugeren ingen hjælp til, hvad der skal skrives. Tilføj en label (som svæver over feltet) og en placeholder (et tip, der vises, når feltet er tomt).

Disse små detaljer gør formularer langt nemmere at forstå.

var email by remember { mutableStateOf("") }

TextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") },
    placeholder = { Text("you@example.com") }
)

OutlinedTextField

Material Design tilbyder to hovedstilarter. TextField har en udfyldt baggrund, mens OutlinedTextField tegner en kant rundt om feltet. De bruger den samme API, så det er nemt at skifte mellem dem.

Felter med kant er populære i formularer, fordi de er lette at overskue, når de placeres lodret.

var username by remember { mutableStateOf("") }

OutlinedTextField(
    value = username,
    onValueChange = { username = it },
    label = { Text("Username") },
    singleLine = true
)

Ikoner i starten og slutningen

Du kan udsmykke et felt med ikoner. Et leadingIcon vises i starten, hvilket er velegnet til et søge- eller e-mailsymbol, og et trailingIcon vises i slutningen, ofte som en ryddeknap.

Ikoner gør det tydeligt med et blik, hvad feltet bruges til.

var query by remember { mutableStateOf("") }

OutlinedTextField(
    value = query,
    onValueChange = { query = it },
    label = { Text("Search") },
    leadingIcon = {
        Icon(Icons.Default.Search, contentDescription = null)
    }
)

En ryddeknap

Et almindeligt mønster i brugeroplevelsen er et lille "x", der rydder feltet. Vis det kun, når der er tekst, ved at bruge pladsen trailingIcon og en IconButton.

Bemærk, at rydningen blot består i at sætte tilstanden tilbage til en tom streng.

var text by remember { mutableStateOf("") }

OutlinedTextField(
    value = text,
    onValueChange = { text = it },
    label = { Text("Note") },
    trailingIcon = {
        if (text.isNotEmpty()) {
            IconButton(onClick = { text = "" }) {
                Icon(Icons.Default.Clear, contentDescription = "Clear")
            }
        }
    }
)

Én linje eller flere linjer

Som standard kan et TextField vokse til flere linjer. For ting som et navn eller en e-mailadresse skal du sætte singleLine = true, så brugeren ikke kan indsætte et linjeskift.

Til længere noter kan du lade feltet have flere linjer og eventuelt begrænse højden med maxLines.

var bio by remember { mutableStateOf("") }

OutlinedTextField(
    value = bio,
    onValueChange = { bio = it },
    label = { Text("Bio") },
    maxLines = 4
)

Reagér på indtastning i realtid

Fordi du ejer teksttilstanden, kan du reagere på den med det samme. Et klassisk eksempel er at vise det aktuelle antal tegn under feltet.

Hvert tastetryk opdaterer text, hvilket rekonstruerer både feltet og antallet nedenunder.

var text by remember { mutableStateOf("") }

Column {
    OutlinedTextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Tweet") }
    )
    Text("${text.length} / 280")
}

Omdannelse af indtastning

Nogle gange vil du standardisere det, brugeren skriver, før du gemmer det. I onValueChange kan du først omdanne den nye værdi.

Her tvinger vi et brugernavn til små bogstaver og fjerner mellemrum. Fordi du styrer kredsløbet, viser feltet altid den rensede version.

var handle by remember { mutableStateOf("") }

OutlinedTextField(
    value = handle,
    onValueChange = { input ->
        handle = input.lowercase().filterNot { it.isWhitespace() }
    },
    label = { Text("Handle") },
    singleLine = true
)

Ren Kotlin: Rensning af et brugernavn

Omdannelseslogikken ovenfor er almindelig Kotlin. Du kan afprøve den isoleret uden Android. Her kører den samme rensefunktion alene.

Når du holder denne slags logik i rene funktioner, bliver den nem at enhedsteste.

fun cleanHandle(input: String): String =
    input.lowercase().filterNot { it.isWhitespace() }

fun main() {
    println(cleanHandle("  John Doe "))
    println(cleanHandle("ADA Lovelace"))
}

Hurtigt tjek

Hvad sker der, hvis et TextFields onValueChange-tilbagekald aldrig opdaterer den tilstand, der sendes til value?

Besvar den i den interaktive lektion

Opsummering

Du kender nu grundprincipperne for tekstindtastning i Compose:

TextField og OutlinedTextField modtager en value og et onValueChange-tilbagekald.
Du gemmer teksten i remember { mutableStateOf(...) } og opdaterer den ved hver ændring (tilstandsløftning).
label, placeholder, ikoner i starten og slutningen samt singleLine bestemmer udseendet og adfærden.
Fordi du ejer tilstanden, kan du reagere i realtid eller omdanne indtastningen, mens brugeren skriver.

Næste trin: håndtering af tilstanden i en hel formular i stedet for kun ét felt.

Gratis at komme i gang

Lær Kotlin med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 36
Lektioner: 152

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “TextField og brugerinput” gratis?

Ja — alle 3 lektioner i læringssporet Android Academy, inklusive “TextField og brugerinput”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Android Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “TextField og brugerinput”?

Indfang tekst fra brugeren i Compose. Du øver dig i Android Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Android Academy?

Der kræves ingen tidligere erfaring. Android Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.

Hvor lang tid tager lektionen “TextField og brugerinput”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Android Academy-lektion?

Ja. Alle Android Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Android Academy