Etiketter, plassholdere og ledende ikoner
Gjør inndata tydelige og brukervennlige.
Etiketter, plassholdere og ledende ikoner er en gratis leksjon i Jetpack Compose Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Jetpack Compose Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.
Gjør inndata brukervennlig
En tom boks lar brukerne gjette. Etiketter, plassholdere og ikoner gjør et enkelt felt til et felt som veileder brukeren. 🧭
Plassen for label
label navngir feltet. Den vises inne i feltet når det er tomt, og flyter deretter opp til kanten når feltet får fokus eller inneholder tekst.
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") }
)Legg til en plassholder
En placeholder er hjelpetekst som bare vises når feltet er tomt. Bruk den til et eksempel, ikke til navnet på feltet.
placeholder = { Text("you@example.com") }Label kontra plassholder
label forblir alltid synlig for å identifisere feltet. Plassholderen forsvinner idet brukeren begynner å skrive. Bruk dem sammen.
Ikoner først
Et leadingIcon vises først i feltet. En konvolutt ved siden av et e-postfelt gjør formålet tydelig med én gang.
leadingIcon = {
Icon(Icons.Default.Email, contentDescription = null)
}Ikoner sist også
Et trailingIcon vises sist i feltet. Det passer perfekt for en knapp som tømmer feltet, eller for å vise og skjule passordet.
trailingIcon = {
Icon(Icons.Default.Clear, contentDescription = "Clear")
}Beskriv alltid ikoner
Gi hvert Icon en contentDescription slik at skjermlesere kan kunngjøre det. Send null bare når ikonet er rent dekorativt.
Gjør ikonet sist i feltet trykkbart
Pakk et ikon sist i feltet inn i en IconButton, slik at brukerne kan trykke på det, for eksempel for å tømme feltet med ett trykk.
trailingIcon = {
IconButton(onClick = { email = "" }) {
Icon(Icons.Default.Clear, "Clear")
}
}Støttetekst
supportingText viser et lite hint under feltet, for eksempel en påminnelse om format eller en tegngrense, uten å gjøre inndatafeltet trangt.
supportingText = { Text("We never share your email.") }Kombiner dem med omtanke
En etikett, et ikon og en kort plassholder er mer enn nok. For mange hint skaper støy, så hold hvert felt rolig og tydelig.
Slots er bare Composable-funksjoner
Hver slot, som label og leadingIcon, er en lambda som inneholder Composable-funksjoner. Det betyr at du kan legge inn hvilket som helst brukergrensesnitt i dem.
Hurtigsjekk
Når forsvinner en plassholder fra et tekstfelt?
Oppsummering
Du gjorde inndatafeltene bedre med en label, plassholderhint, ikoner først og sist i feltet og støttetekst. Vennlige felt gir fornøyde brukere. 😊
Lær deg Kotlin med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 30
- Leksjoner
- 120
Ofte stilte spørsmål
Er leksjonen «Etiketter, plassholdere og ledende ikoner» gratis?
Ja – hele teksten i «Etiketter, plassholdere og ledende ikoner» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Jetpack Compose Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Jetpack Compose Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «Etiketter, plassholdere og ledende ikoner»?
Gjør inndata tydelige og brukervennlige. Du øver på Jetpack Compose Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Jetpack Compose Academy?
Ingen tidligere erfaring er nødvendig. Jetpack Compose Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Etiketter, plassholdere og ledende ikoner»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Jetpack Compose Academy-leksjonen?
Ja. Alle Jetpack Compose Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- TextField og OutlinedTextField
- Etiketter, plassholdere og ledende ikoner
- Tastaturtyper og IME-handlinger
- Innebygd validering og feiltilstander