Pulsanti Text, Outlined e Icon
Scelga la variante di pulsante più adatta al caso.
Pulsanti Text, Outlined e Icon è una lezione Jetpack Compose 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 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.
I pulsanti hanno personalità
Non tutte le azioni meritano un pulsante pieno e vistoso. Compose offre diverse varianti di pulsante, ognuna delle quali comunica un diverso livello di enfasi. 🎨
Il pulsante pieno
Il Button standard è pieno e ad alta enfasi. Attira lo sguardo, quindi lo riservi all'unica azione principale di ogni schermata.
Button(onClick = { pay() }) {
Text("Pay now")
}OutlinedButton per le azioni secondarie
Un OutlinedButton presenta solo un bordo, senza riempimento. Viene percepito come una scelta chiara ma secondaria accanto a un pulsante pieno.
OutlinedButton(onClick = { cancel() }) {
Text("Cancel")
}TextButton per una bassa enfasi
Un TextButton mostra solo un'etichetta, senza bordo né riempimento. È perfetto per azioni discrete come Scopri di più o per le scelte di una finestra di dialogo.
TextButton(onClick = { dismiss() }) {
Text("Not now")
}L'enfasi è una gerarchia
La consideri una scala di enfasi: il pulsante pieno è il più evidente, quello con bordo ha un'enfasi media e quello testuale è il più discreto. Abbini la variante al peso dell'azione.
Icone nei pulsanti
Qualsiasi pulsante può contenere un Icon insieme a un'etichetta nella propria riga di contenuto. Aggiunga un piccolo spazio per evitare che icona e testo si tocchino.
Button(onClick = { add() }) {
Icon(Icons.Default.Add, null)
Spacer(Modifier.width(8.dp))
Text("Add")
}Il pulsante IconButton
Un IconButton è un'area compatta da toccare, senza etichetta, che contiene una sola icona. È ideale per le barre degli strumenti e per le azioni nella barra dell'app.
IconButton(onClick = { share() }) {
Icon(Icons.Default.Share, "Share")
}Descriva sempre l'icona
Assegni a un pulsante composto solo da un'icona una contentDescription, così gli screen reader possono annunciarla. Una descrizione null la nasconde alle tecnologie assistive.
IconButton(onClick = { favorite() }) {
Icon(Icons.Default.Favorite, "Favorite")
}FilledIconButton per maggiore enfasi
Le serve un pulsante con icona che risalti? FilledIconButton aggiunge uno sfondo uniforme, aumentando l'enfasi rispetto alla versione semplice.
FilledIconButton(onClick = { record() }) {
Icon(Icons.Default.Mic, "Record")
}Scelga la variante giusta
Una scelta appropriata guida gli utenti: pieno per Conferma, con bordo per un'alternativa, testuale per chiudere, IconButton negli spazi ridotti.
Stesso onClick, aspetto diverso
Ogni variante condivide lo stesso contratto onClick. Cambia solo il peso visivo, mai il modo in cui si collega l'azione.
Verifica rapida
Desidera un'azione discreta e a bassa enfasi, con solo un'etichetta e senza bordo né riempimento.
Riepilogo: lo strumento giusto per ogni tocco
Ora dispone di una cassetta degli attrezzi: Button pieno, OutlinedButton, TextButton e IconButton. Abbini l'enfasi all'azione e assegni un'etichetta alle icone. ✨
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 «Pulsanti Text, Outlined e Icon» è gratuita?
Sì — il testo completo di «Pulsanti Text, Outlined e Icon» è 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 «Pulsanti Text, Outlined e Icon»?
Scelga la variante di pulsante più adatta al caso. 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 2 di 4.
Quanto tempo richiede la lezione «Pulsanti Text, Outlined e Icon»?
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
- Button e onClick
- Pulsanti Text, Outlined e Icon
- Stati abilitato, disabilitato e caricamento
- clickable su qualsiasi Composable