Jetpack Compose Academy · Lezione

Anatomia di una funzione @Composable

Legga una Composable e riconosca ciò che la rende speciale.

Anatomia di una funzione @Composable è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 3 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.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

What Is a Composable?

A Composable is just a Kotlin function that describes a piece of UI. Call it, and Compose draws that UI on screen. It is the building block of everything. 🧱

The @Composable Annotation

The magic marker is @Composable above the function. It tells the Compose compiler this function can emit UI and may be recomposed when data changes.

@Composable
fun Greeting() {
    Text("Hello!")
}

Name It Like a UI Piece

By convention, Composable names use PascalCase nouns like Greeting or ProfileCard, not verbs. The name describes the thing on screen, not an action.

It Returns Unit

A Composable usually returns nothing (Unit). Instead of returning UI, it emits it by calling other Composables inside its body. The side effect is the drawing.

Built-In Composables

Compose ships ready-made Composables like Text, Button, Image, and Icon. You combine these to build your own, so you rarely start from a blank canvas.

@Composable
fun Welcome() {
    Text("Welcome to Compose")
}

Parameters Pass In Data

Composables take parameters just like any function. Pass data in, and the UI reflects it. This is how the same component shows different content.

@Composable
fun Greeting(name: String) {
    Text("Hello, " + name)
}

The Modifier Parameter

Most Composables accept a modifier to control size, padding, and layout. By convention it is the first optional parameter, ready for you to customize.

Composables Call Composables

A Composable can only be called from another Composable. This rule lets Compose track the tree of UI and recompose the right parts when state changes.

Keep Them Small

Aim for small, focused Composables that do one thing. Tiny pieces are easier to reuse, preview, and combine into bigger screens later on.

Prefer No Side Effects

A good Composable is predictable: same inputs, same UI. Avoid surprises like network calls in the body, since Compose may run it many times.

Compose Builds a Tree

As Composables call each other, they form a UI tree. Compose walks this tree to draw the screen and to update only the branches that changed.

Quick Check

Let's verify what marks a function as a UI builder.

Recap: The Composable

A Composable is a Kotlin function with @Composable that emits UI, takes parameters, accepts a modifier, and calls other Composables to build a tree.

Domande Frequenti

La lezione «Anatomia di una funzione @Composable» è gratuita?

Sì — il testo completo di «Anatomia di una funzione @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 Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.

Cosa imparerò in «Anatomia di una funzione @Composable»?

Legga una Composable e riconosca ciò che la rende speciale. 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 3 di 4.

Quanto tempo richiede la lezione «Anatomia di una funzione @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 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

← Torna a Jetpack Compose Academy