Layout, modifier e theming
Creare schermate condivise adattive con Material
Layout, modifier e theming è una lezione Kotlin Multiplatform 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 Kotlin Multiplatform Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Kotlin Multiplatform Academy include 4 lezioni in totale.
Tre elementi fondamentali del layout
Quasi ogni schermo è costruito con Column, Row e Box. Column dispone i figli verticalmente, Row li affianca e Box li sovrappone.
Column {
Text("Top")
Text("Bottom")
}Le righe dispongono gli elementi affiancati
Una Row dispone i propri figli orizzontalmente. La utilizzi quando vuole mettere un'etichetta accanto a un valore oppure un'icona accanto al testo, sulla stessa riga.
Row {
Text("Price:")
Text("$9")
}Box per sovrapporre gli elementi
Una Box sovrappone i propri figli nello stesso punto. È perfetta per un badge sopra un avatar o per del testo centrato su un'immagine.
Box {
Image(painter, null)
Text("New")
}I modifier definiscono ogni aspetto
Un Modifier regola dimensioni, spaziatura, sfondo e altro. Le chiamate vengono concatenate in ordine, e l'ordine cambia realmente il risultato.
Text(
"Hi",
modifier = Modifier.padding(16.dp)
)L'ordine delle catene è importante
I modifier vengono applicati dall'alto verso il basso. Il padding prima di background riduce l'area del colore, mentre background prima del padding riempie anche dietro il padding. Li legga come passaggi.
Modifier
.background(Blue)
.padding(8.dp)Riempire e dimensionare lo spazio
Utilizzi fillMaxWidth, fillMaxSize o una dimensione fissa per controllare quanto spazio un composable occupa all'interno del layout padre.
Column(Modifier.fillMaxSize()) {
Text("Stretched")
}Disposizione e allineamento
I parametri di layout come Arrangement e Alignment posizionano i figli, ad esempio centrando una Row o distribuendo uniformemente gli elementi al suo interno.
Row(
horizontalArrangement = Arrangement.SpaceBetween
) { }Applicare il tema con MaterialTheme
Racchiuda l'app in MaterialTheme per fornire una combinazione di colori, una tipografia e delle forme. Ogni componente Material li utilizza automaticamente.
MaterialTheme(colorScheme = darkColorScheme()) {
App()
}Leggere i valori del tema ovunque
All'interno del tema accede ai token tramite MaterialTheme.colorScheme e la tipografia, mantenendo coerente lo stile in ogni schermata condivisa.
Text(
"Title",
color = MaterialTheme.colorScheme.primary
)Adattarsi a ogni piattaforma
Lo stesso codice di layout viene eseguito ovunque, ma può usare condizioni basate sulle dimensioni o sulla piattaforma per rendere gli schermi adattivi a telefoni, tablet e desktop.
Coerente per impostazione predefinita
Poiché layout, modifier e theming sono tutti condivisi, gli schermi Android e iOS hanno lo stesso aspetto senza duplicare il lavoro di stile.
Verifica rapida
Che cosa fa un Modifier?
Riepilogo: layout, modifier e tema
Ha disposto l'interfaccia con Column, Row e Box, ne ha definito la forma con modifier concatenati e applicato un MaterialTheme condiviso, mantenendo la coerenza su ogni piattaforma. 🎨
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 «Layout, modifier e theming» è gratuita?
Sì — il testo completo di «Layout, modifier e theming» è 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 Kotlin Multiplatform Academy, passa a CoddyKit PRO. Il corso Kotlin Multiplatform Academy include 4 lezioni in totale.
Cosa imparerò in «Layout, modifier e theming»?
Creare schermate condivise adattive con Material Eserciti Kotlin Multiplatform 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 Kotlin Multiplatform Academy?
Non è richiesta alcuna esperienza precedente. Kotlin Multiplatform 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 «Layout, modifier e theming»?
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 Kotlin Multiplatform Academy?
Sì. Ogni lezione Kotlin Multiplatform 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
- Abilitare Compose Multiplatform
- Layout, modifier e theming
- Stato e ricomposizione nell'interfaccia condivisa
- Ospitare l'interfaccia condivisa su iOS e Desktop