Android Academy · Lezione

Gestire lo stato dei moduli

Conservi e aggiorni i valori dei campi tramite lo stato

Gestire lo stato dei moduli è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 2 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.

Da un campo a un modulo

Un singolo campo di testo è semplice. Un modulo reale ne contiene diversi: nome, email, password e magari una casella di controllo. In questa lezione imparerete metodi ordinati per mantenere e aggiornare lo stato di un intero modulo in Jetpack Compose.

Se impostate correttamente questo aspetto, convalida, invio e anteprime diventano tutti semplici.

Stati indipendenti multipli

L'approccio più semplice consiste nell'usare un mutableStateOf per ogni campo. Ogni campo legge e aggiorna la propria parte di stato.

È una soluzione perfettamente adatta ai moduli piccoli, con due o tre campi.

@Composable
fun LoginForm() {
    var email by remember { mutableStateOf("") }
    var password by remember { mutableStateOf("") }

    Column {
        OutlinedTextField(email, { email = it }, label = { Text("Email") })
        OutlinedTextField(password, { password = it }, label = { Text("Password") })
    }
}

Raggruppare lo stato in una data class

Quando i moduli crescono, molte variabili separate diventano difficili da gestire. Un'opzione più ordinata consiste nel modellare l'intero modulo come un'unica data class immutabile.

Mantenete un unico elemento di stato che contiene quell'oggetto e aggiornatelo con copy().

data class SignUpState(
    val name: String = "",
    val email: String = "",
    val agreedToTerms: Boolean = false
)

Aggiornamento con copy()

Poiché l'oggetto di stato è immutabile, non lo modificate mai direttamente. Create invece una nuova copia con un campo modificato e riassegnatela.

In questo modo il modello di stato di Compose rimane prevedibile: un nuovo oggetto corrisponde a un nuovo snapshot, che attiva la ricomposizione.

var form by remember { mutableStateOf(SignUpState()) }

OutlinedTextField(
    value = form.name,
    onValueChange = { form = form.copy(name = it) },
    label = { Text("Name") }
)

Un modulo completo basato su una data class

Qui l'intero modulo è gestito da un'unica SignUpState. Ogni campo aggiorna una singola proprietà tramite copy().

Noti quanto sia semplice leggere in qualsiasi momento il valore dell'intero modulo: è sufficiente usare form.

var form by remember { mutableStateOf(SignUpState()) }

Column {
    OutlinedTextField(
        value = form.name,
        onValueChange = { form = form.copy(name = it) },
        label = { Text("Name") }
    )
    OutlinedTextField(
        value = form.email,
        onValueChange = { form = form.copy(email = it) },
        label = { Text("Email") }
    )
}

Caselle di controllo e interruttori

Non tutti gli input sono testuali. Un Checkbox o uno Switch funzionano allo stesso modo: un valore booleano e un callback onCheckedChange.

Memorizzi il valore booleano nello stato del modulo proprio come farebbe con una stringa.

var form by remember { mutableStateOf(SignUpState()) }

Row(verticalAlignment = Alignment.CenterVertically) {
    Checkbox(
        checked = form.agreedToTerms,
        onCheckedChange = { form = form.copy(agreedToTerms = it) }
    )
    Text("I agree to the terms")
}

Derivare valori dallo stato

Un grande vantaggio di avere uno stato unificato è poter calcolare dei valori senza memorizzare variabili aggiuntive. Ad esempio, può determinare se il modulo è pronto per l'invio.

Usi derivedStateOf (oppure una semplice espressione), in modo che il risultato si aggiorni automaticamente quando cambia il modulo.

var form by remember { mutableStateOf(SignUpState()) }

val canSubmit by remember {
    derivedStateOf {
        form.name.isNotBlank() &&
        form.email.isNotBlank() &&
        form.agreedToTerms
    }
}

Button(onClick = { /* submit */ }, enabled = canSubmit) {
    Text("Sign Up")
}

Gestire le modifiche di configurazione

remember conserva lo stato tra le ricomposizioni, ma lo perde in caso di modifica della configurazione, ad esempio quando si ruota lo schermo. Per conservare valori semplici durante la rotazione, usi rememberSaveable.

Funziona immediatamente con i tipi primitivi e con i tipi Parcelable.

var email by rememberSaveable { mutableStateOf("") }

OutlinedTextField(
    value = email,
    onValueChange = { email = it },
    label = { Text("Email") }
)

Sollevare lo stato del modulo in un ViewModel

Per qualsiasi modulo più che banale, conservi lo stato in un ViewModel. Sopravvive alle modifiche di configurazione e mantiene la logica dell'interfaccia fuori dal composable.

Il composable legge lo stato e inoltra gli eventi; il ViewModel è la fonte autorevole dei dati.

class SignUpViewModel : ViewModel() {
    var state by mutableStateOf(SignUpState())
        private set

    fun onNameChange(value: String) {
        state = state.copy(name = value)
    }
}

Collegare il ViewModel

Nel composable, recuperi il ViewModel e colleghi ogni campo al relativo stato e gestore. L'interfaccia rimane essenziale e facile da testare.

Questa è la struttura consigliata per i moduli destinati alla produzione.

@Composable
fun SignUpScreen(vm: SignUpViewModel = viewModel()) {
    OutlinedTextField(
        value = vm.state.name,
        onValueChange = vm::onNameChange,
        label = { Text("Name") }
    )
}

Kotlin puro: <code>copy()</code> in azione

Il modello di aggiornamento con copy() è semplicemente il comportamento standard delle data class di Kotlin. Qui viene eseguito in modo indipendente, così può vedere come ogni aggiornamento produca un oggetto completamente nuovo.

data class SignUpState(
    val name: String = "",
    val email: String = ""
)

fun main() {
    var state = SignUpState()
    state = state.copy(name = "Ada")
    state = state.copy(email = "ada@dev.io")
    println(state)
}

Verifica rapida

Ha modellato il modulo come una data class immutabile conservata nello stato. Come dovrebbe aggiornare un singolo campo?

Riepilogo

Ha imparato a gestire lo stato di interi moduli:

Moduli piccoli: un mutableStateOf per ogni campo.
Moduli più grandi: una singola data class immutabile, aggiornata con copy().
I valori booleani gestiscono Checkbox e Switch nello stesso modo in cui le stringhe gestiscono i campi di testo.
Derivi valori come "può essere inviato" invece di memorizzarli.
Usi rememberSaveable per la rotazione e un ViewModel per le schermate reali.

Prossimo argomento: convalidare gli input e mostrare messaggi di errore utili.

Domande Frequenti

La lezione «Gestire lo stato dei moduli» è gratuita?

Sì — il testo completo di «Gestire lo stato dei moduli» è 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 «Gestire lo stato dei moduli»?

Conservi e aggiorni i valori dei campi tramite lo stato 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 2 di 4.

Quanto tempo richiede la lezione «Gestire lo stato dei moduli»?

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

← Torna a Android Academy