0Pricing
Android Academy · Lezione

TextField e input dell'utente

Acquisisca il testo dell'utente in Compose

TextField e input dell'utente è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 4 lezioni in totale.

Acquisizione dell'input dell'utente

Quasi tutte le app reali devono chiedere qualcosa all'utente: un nome, un indirizzo email, una query di ricerca. In Jetpack Compose, il componente di base per l'inserimento di testo è TextField.

In questa lezione imparerete a visualizzare un campo di testo, leggere ciò che l'utente digita e mantenere il campo sincronizzato con lo stato della vostra app. Questa è la base di ogni modulo che creerete.

Il vostro primo TextField

Un TextField richiede due elementi: un value (il testo corrente da visualizzare) e una callback onValueChange (l'azione da eseguire quando l'utente digita).

Compose è dichiarativo, quindi il campo non memorizza il proprio testo. Siete voi a mantenere il testo nello stato e a passarlo nuovamente al campo. Questo schema è chiamato state hoisting.

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

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

Come funziona il ciclo del valore

L'idea più importante è questa: un TextField mostra esattamente ciò che passate a value. Quando l'utente preme un tasto, Compose chiama onValueChange con il nuovo testo.

  • Salvate il nuovo testo nello stato.
  • Le modifiche allo stato attivano la ricomposizione.
  • Il campo viene ridisegnato con il value aggiornato.

Se dimenticate di aggiornare lo stato all'interno di onValueChange, il campo sembrerà bloccato perché value non cambia mai.

var name by remember { mutableStateOf("") }

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

Aggiunta di un'etichetta e di un segnaposto

Un campo di testo senza indicazioni non aiuta l'utente a capire cosa digitare. Aggiungete una label (che fluttua sopra il campo) e un placeholder (un suggerimento mostrato quando il campo è vuoto).

Questi piccoli accorgimenti rendono i moduli molto più facili da comprendere.

var email by remember { mutableStateOf("") }

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

OutlinedTextField

Material Design offre due stili principali. TextField ha uno sfondo pieno, mentre OutlinedTextField disegna un bordo attorno al campo. Condividono la stessa API, quindi passare da uno all'altro è semplice.

I campi con bordo sono molto usati nei moduli perché risultano chiari quando vengono disposti verticalmente.

var username by remember { mutableStateOf("") }

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

Icone iniziali e finali

Potete decorare un campo con delle icone. Una leadingIcon appare all'inizio, ottima per un simbolo di ricerca o di email, mentre una trailingIcon appare alla fine, spesso come pulsante per cancellare.

Le icone rendono immediatamente chiaro lo scopo del campo.

var query by remember { mutableStateOf("") }

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

Un pulsante per cancellare

Un pattern UX comune è una piccola "x" che cancella il contenuto del campo. Mostratela solo quando è presente del testo, usando lo slot trailingIcon e un IconButton.

Notate che cancellare il contenuto significa semplicemente reimpostare lo stato su una stringa vuota.

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")
            }
        }
    }
)

Riga singola e righe multiple

Per impostazione predefinita, un TextField può estendersi su più righe. Per elementi come nome o email, impostate singleLine = true, così l'utente non potrà inserire un ritorno a capo.

Per note più lunghe, lasciatelo su più righe e, facoltativamente, limitatene l'altezza con maxLines.

var bio by remember { mutableStateOf("") }

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

Reagire all'input in tempo reale

Poiché siete voi a gestire lo stato del testo, potete reagire immediatamente alle modifiche. Un esempio classico è mostrare sotto il campo il conteggio dei caratteri in tempo reale.

Ogni pressione di un tasto aggiorna text, causando la ricomposizione sia del campo sia del conteggio sottostante.

var text by remember { mutableStateOf("") }

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

Trasformazione dell'input

A volte è utile normalizzare ciò che l'utente digita prima di salvarlo. All'interno di onValueChange potete prima trasformare il nuovo valore.

In questo caso convertiamo il nome utente in minuscolo e rimuoviamo gli spazi. Poiché controllate voi il ciclo, il campo mostra sempre la versione ripulita.

var handle by remember { mutableStateOf("") }

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

Kotlin puro: ripulire un handle

La logica di trasformazione precedente è scritta semplicemente in Kotlin. Potete testarla separatamente, senza Android. Ecco la stessa regola di pulizia eseguita in modo indipendente.

Mantenere questo tipo di logica in funzioni pure facilita i test unitari.

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

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

Verifica rapida

Che cosa succede se la callback onValueChange di un TextField non aggiorna mai lo stato passato a value?

Riepilogo

Ora conoscete le basi dell'input di testo in Compose:

  • TextField e OutlinedTextField accettano un value e una callback onValueChange.
  • Mantenete il testo in remember { mutableStateOf(...) } e aggiornatelo a ogni modifica (state hoisting).
  • label, placeholder, icone iniziali e finali e singleLine definiscono l'aspetto e il comportamento.
  • Poiché gestite voi lo stato, potete reagire in tempo reale o trasformare l'input mentre l'utente digita.

Prossimo argomento: gestione dello stato di un intero modulo, non solo di un campo.

Domande Frequenti

La lezione «TextField e input dell'utente» è gratuita?

Sì — il testo completo di «TextField e input dell'utente» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 4 lezioni in totale.

Cosa imparerò in «TextField e input dell'utente»?

Acquisisca il testo dell'utente in Compose Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Android Academy?

Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «TextField e input dell'utente»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Android Academy?

Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. TextField e input dell'utente
  2. Gestire lo stato dei moduli
  3. Convalidare l'input
  4. Opzioni e azioni della tastiera
← Torna a Android Academy