Estrarre Composable riutilizzabili
Rifattorizzi la schermata in componenti ordinati.
Estrarre Composable riutilizzabili è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 4 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 Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
È il momento di eseguire il refactoring
La scheda funziona, ma è contenuta in un'unica funzione molto lunga. Ora la dividerete in piccoli Composables con nomi chiari, più facili da leggere e riutilizzare. 🧩
Individuare gli schemi ripetuti
I tre blocchi delle statistiche sono quasi identici. Strutture ripetute di questo tipo indicano chiaramente che è il momento di estrarre un singolo Composable riutilizzabile.
Estrarre StatBlock
Spostate una statistica in una funzione separata. Passate i valori variabili, cioè conteggio ed etichetta, come parametri.
@Composable
fun StatBlock(count: String, label: String) {
Column { Text(count); Text(label) }
}Riutilizzarlo tre volte
Ora il Row delle statistiche contiene solo tre chiamate ordinate. Lo stesso StatBlock visualizza ogni volta dati diversi, senza alcuna duplicazione.
Row {
StatBlock("128", "Posts")
StatBlock("4.2k", "Followers")
StatBlock("180", "Following")
}Estrarre l'intestazione
Raggruppate avatar, nome e biografia in un Composable ProfileHeader. La funzione principale della schermata diventerà più breve e molto più facile da leggere.
@Composable
fun ProfileHeader(name: String, bio: String) {
Column { /* avatar, name, bio */ }
}Scegliere nomi chiari
I nomi dei Composable ben progettati descrivono ciò che vedete: ProfileHeader, StatBlock, FollowButton. Nomi chiari fanno leggere la scheda come una frase.
Passare i dati
Mantenete flessibili i componenti accettando parametri invece di inserire valori fissi nel codice. Lo stesso ProfileHeader potrà mostrare qualsiasi utente.
ProfileHeader(name = "Ada Lovelace", bio = "Building apps.")Spostare all'esterno la gestione del clic
Lasciate che sia il componente padre a decidere cosa accade al tocco. Esponete un parametro lambda onFollowClick, così FollowButton rimarrà generico.
@Composable
fun FollowButton(onClick: () -> Unit) {
Button(onClick = onClick) { Text("Follow") }
}Comporre la schermata
Ora ProfileCard, il componente di livello superiore, si limita a comporre i vari elementi nell'ordine corretto. Ogni Composable figlio svolge un solo compito: questo è il modo di lavorare di Compose.
Column {
ProfileHeader(name, bio)
StatsRow(stats)
FollowButton(onFollow)
}Aggiungere un parametro Modifier
I Composable davvero riutilizzabili accettano un parametro Modifier, con valore predefinito Modifier. Chi li chiama può quindi dimensionarli e aggiungere padding dall'esterno.
@Composable
fun StatBlock(
count: String,
label: String,
modifier: Modifier = Modifier
) { /* ... */ }Pulito e riutilizzabile
La vostra unica funzione enorme è ora composta da diversi Composable piccoli, mirati e riutilizzabili. Questa struttura cresce insieme alla complessità dell'app. 🎉
Verifica rapida
Cosa rende un Composable riutilizzabile con dati diversi?
Riepilogo: avete realizzato una scheda
Ha rifattorizzato la scheda del profilo in piccoli Composable riutilizzabili con parametri e uno slot Modifier. Ora dispone di una schermata pulita e scalabile, costruita da cima a fondo.
Impara Kotlin con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Estrarre Composable riutilizzabili» è gratuita?
Sì — il testo completo di «Estrarre Composable riutilizzabili» è 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 Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «Estrarre Composable riutilizzabili»?
Rifattorizzi la schermata in componenti ordinati. Eserciti Jetpack Compose 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 Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose 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 4 di 4.
Quanto tempo richiede la lezione «Estrarre Composable riutilizzabili»?
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 Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose 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
- Disegnare il layout della scheda profilo
- Sezione con avatar, nome e biografia
- Riga delle statistiche e pulsante Segui
- Estrarre Composable riutilizzabili