LazyRow per i carousel
Costruisca una fila scorrevole orizzontalmente.
LazyRow per i carousel è 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.
Scorrere lateralmente
A volte il contenuto deve scorrere a sinistra e a destra, come uno scaffale di film. In questo caso utilizzi LazyRow, la versione orizzontale di LazyColumn. ↔️
Perché non una Row normale?
Una Row normale compone immediatamente ogni elemento figlio e non può scorrere. Una LazyRow scorre orizzontalmente e costruisce solo gli elementi visibili.
LazyRow di base
Fornisca gli items a LazyRow proprio come a una colonna, ma questi verranno allineati fianco a fianco invece di essere impilati.
LazyRow {
items(movies) { movie ->
MovieCard(movie)
}
}Distanziare le schede
Le schede di un carosello hanno bisogno di spazio tra loro. Utilizzi horizontalArrangement con spacedBy per impostare una distanza uniforme tra ogni scheda.
LazyRow(
horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }Padding alle estremità
Aggiunga contentPadding affinché la prima scheda sporga leggermente dal bordo invece di essere tagliata a filo.
contentPadding = PaddingValues(horizontal = 16.dp)Dimensionare ogni scheda
Assegni a ogni elemento del carosello una width fissa, così le schede mantengono dimensioni uniformi mentre l'utente scorre.
MovieCard(movie, Modifier.width(140.dp))Un'anteprima della scheda successiva
Renda visibile una parte della scheda successiva per suggerire che c'è altro contenuto. Una width della scheda leggermente inferiore rispetto allo schermo raggiunge bene questo effetto.
val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))Intestazioni sopra i caroselli
Un carosello si trova solitamente sotto un titolo. Inserisca LazyRow in una Column, con un'intestazione Text sopra di essa.
Column {
Text("Trending Now")
LazyRow { items(movies) { MovieCard(it) } }
}Annidare in una LazyColumn
Una schermata principale spesso contiene molti caroselli. Inserisca diverse righe LazyRow all'interno di una LazyColumn principale per creare un feed in stile Netflix.
LazyColumn {
items(shelves) { shelf ->
Shelf(shelf)
}
}Ogni Row ha bisogno di larghezza
Una LazyRow all'interno di una LazyColumn riempie automaticamente la larghezza disponibile. Si assicuri solo che il genitore le fornisca una width finita su cui effettuare la misurazione.
Quando usare LazyRow
Scelga LazyRow per scaffali, filtri a chip, bolle delle storie e qualsiasi contenuto che inviti a scorrere orizzontalmente invece di scorrere verso il basso.
Verifica rapida
Rifletta sullo scorrimento orizzontale.
Riepilogo: caroselli
Ha creato scaffali orizzontali con LazyRow: elementi affiancati, spaziatura, padding finale, schede di larghezza fissa e annidamento all'interno di un feed. 🎬
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 «LazyRow per i carousel» è gratuita?
Sì — il testo completo di «LazyRow per i carousel» è 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 «LazyRow per i carousel»?
Costruisca una fila scorrevole orizzontalmente. 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 «LazyRow per i carousel»?
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
- Gallerie con LazyVerticalGrid
- LazyRow per i carousel
- Celle di griglia adattive e fisse
- Stato di scorrimento e scorrimento programmatico