Android Academy · Lezione

Il primo composable

Crei e visualizzi in anteprima una funzione composable.

Il primo composable è 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.

La prima funzione composable

Una funzione composable è semplicemente una funzione Kotlin contrassegnata con @Composable. Scriviamone una che saluti un utente per nome.

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

L'annotazione @Composable

L'annotazione @Composable indica al compilatore che questa funzione può emettere l'interfaccia utente e chiamare altre funzioni composable. Senza di essa, non può chiamare Text, Button o altre funzioni dell'interfaccia.

Convenzione di denominazione

Le funzioni composable che emettono l'interfaccia utente hanno nomi costituiti da sostantivi in PascalCase, come Greeting o ProfileCard, analogamente a una classe. Questo segnala che la funzione "disegna qualcosa" anziché "restituire un valore".

I parametri guidano l'interfaccia

Una funzione composable accetta parametri proprio come qualsiasi funzione. Questi parametri sono i suoi input. Argomenti diversi producono interfacce diverse.

@Composable
fun Greeting(name: String) {
    Text(text = "Welcome, $name")
}
// Greeting("Sam") and Greeting("Mia") render different text

Chiamare le funzioni composable

Le funzioni composable possono essere chiamate solo da altre funzioni composable. Si compone una schermata annidando le chiamate.

@Composable
fun WelcomeScreen() {
    Greeting(name = "Ada")
    Greeting(name = "Grace")
}

Ospitare con setContent

Per visualizzare effettivamente le funzioni composable, un'Activity chiama setContent { } in onCreate. La lambda è la radice dell'interfaccia Compose.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            WelcomeScreen()
        }
    }
}

Le funzioni composable restituiscono Unit

Noti che le funzioni composable non restituiscono un oggetto dell'interfaccia. Hanno tipo restituito Unit ed emettono l'interfaccia come effetto collaterale della chiamata. Si crea l'interfaccia chiamando le funzioni, non restituendo valori.

Parametri predefiniti

Gli argomenti predefiniti di Kotlin sono molto utili in questo caso. Assegni un valore predefinito a un parametro, così chi lo chiama può ometterlo.

@Composable
fun Greeting(name: String = "Guest") {
    Text(text = "Hello, $name!")
}
// Greeting() shows "Hello, Guest!"

Riutilizzare le funzioni composable

Poiché sono funzioni, le funzioni composable sono riutilizzabili. Definisca Greeting una volta e la chiami ovunque con nomi diversi. In questo modo evita di duplicare il codice dell'interfaccia.

Le mantenga piccole

Le buone funzioni composable sono piccole e mirate. Una funzione composable dovrebbe descrivere un singolo blocco logico dell'interfaccia. Componga schermate più grandi combinando funzioni composable di piccole dimensioni.

Mettere tutto insieme

Ecco una prima funzione composable completa, collegata a un'activity. Eseguendola su un dispositivo viene visualizzato "Hello, Compose!".

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Greeting(name = "Compose")
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello, $name!")
}

Verifica rapida

Che cosa consente di fare a una funzione l'annotazione @Composable?

Riepilogo

Ha scritto la sua prima funzione composable. Ricordi:

Contrassegni le funzioni dell'interfaccia con @Composable.
Usi nomi in PascalCase.
I parametri sono gli input che determinano l'interfaccia.
setContent { } ospita le funzioni composable in un'activity.

Domande Frequenti

La lezione «Il primo composable» è gratuita?

Sì — il testo completo di «Il primo composable» è 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 «Il primo composable»?

Crei e visualizzi in anteprima una funzione composable. 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 «Il primo composable»?

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