Tworzenie przewijanych list za pomocą ListView
Wyświetlaj przewijane kolekcje wydajnie we Flutterze, korzystając z ListView, ListView.builder i separatorów elementów.
Tworzenie przewijanych list za pomocą ListView to bezpłatna lekcja Flutter Mobile Development na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Flutter Mobile Development, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.
Części tej lekcji nie zostały jeszcze przetłumaczone i są wyświetlane po angielsku.
Why ListView?
Most apps show lists: messages, products, feeds. A ListView arranges its children in a scrollable column, handling overflow automatically when content exceeds the screen.
A Simple ListView
Pass a fixed set of children. Good for short, known lists.
ListView(
children: [
Text("Apple"),
Text("Banana"),
Text("Cherry"),
],
)ListTile for Rows
ListTile is a ready-made row with leading icon, title, subtitle, and trailing widget, perfect for menus and settings.
ListTile(
leading: Icon(Icons.person),
title: Text("Ada Lovelace"),
subtitle: Text("Mathematician"),
trailing: Icon(Icons.chevron_right),
)The Problem with Long Lists
A plain ListView builds every child up front. For hundreds of items this wastes memory and slows startup. We need lazy building.
ListView.builder
ListView.builder creates items on demand as they scroll into view, so only visible rows exist in memory.
ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)itemCount and itemBuilder
itemCount tells Flutter how many rows exist; itemBuilder is called with each index to build that row. Omitting itemCount makes an infinite list.
Adding Separators
ListView.separated inserts a divider widget between items, keeping spacing consistent.
ListView.separated(
itemCount: items.length,
itemBuilder: (c, i) => ListTile(title: Text(items[i])),
separatorBuilder: (c, i) => Divider(),
)Horizontal Lists
Set scrollDirection: Axis.horizontal to scroll sideways, useful for carousels and chip rows.
ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: tags.length,
itemBuilder: (c, i) => Chip(label: Text(tags[i])),
)Lists Inside Columns
A ListView wants unbounded height, which conflicts with a Column. Wrap it in Expanded to give it the remaining space.
Column(
children: [
Text("Header"),
Expanded(
child: ListView.builder(...),
),
],
)Handling Taps
Make rows interactive with onTap on a ListTile or by wrapping items in GestureDetector/InkWell.
ListTile(
title: Text(items[index]),
onTap: () => print("Tapped " + items[index]),
)Putting It Together
Use ListView.builder for performance, ListTile for clean rows, separated for dividers, and wrap in Expanded inside columns.
Quick Check
Test your understanding of Flutter lists.
Recap
You built scrollable lists:
ListViewfor short fixed listsListView.builderfor efficient long listsListTilerows andseparateddividers- Wrap in
Expandedinside aColumn
Ucz się Dart dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 22
- Lekcje
- 88
Często zadawane pytania
Czy lekcja „Tworzenie przewijanych list za pomocą ListView” jest bezpłatna?
Tak — pełny tekst „Tworzenie przewijanych list za pomocą ListView” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Flutter Mobile Development, przejdź na CoddyKit PRO. Kurs Flutter Mobile Development zawiera 4 lekcji w sumie.
Co nauczysz się w „Tworzenie przewijanych list za pomocą ListView”?
Wyświetlaj przewijane kolekcje wydajnie we Flutterze, korzystając z ListView, ListView.builder i separatorów elementów. Ćwiczysz Flutter Mobile Development z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Flutter Mobile Development?
Nie wymagamy żadnego doświadczenia. Flutter Mobile Development w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.
Ile czasu zajmuje lekcja „Tworzenie przewijanych list za pomocą ListView”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Flutter Mobile Development?
Tak. Każda lekcja Flutter Mobile Development zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- StatelessWidget a StatefulWidget
- Podstawowe widgety układu
- Interaktywne elementy interfejsu
- Tworzenie przewijanych list za pomocą ListView