Jetpack Compose Academy · Lekcja

FlowRow z zawijanymi chipami

Zbuduj od podstaw rzeczywisty układ zawijany

Lekcja 4 z 413 kroki

FlowRow z zawijanymi chipami to bezpłatna lekcja Jetpack Compose Academy 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 Jetpack Compose Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Działanie Flow Row

Flow row umieszcza elementy potomne od lewej do prawej, a następnie zawija je do nowego wiersza, gdy zabraknie szerokości. Doskonale sprawdza się w przypadku chipów tagów i filtrów. 🏷️

Zacznij od composable Layout

Narzędzie jest już znane: composable Layout. Logika zawijania zależy wyłącznie od sposobu mierzenia i rozmieszczania elementów potomnych.

Layout(content, modifier) { measurables, constraints ->
}

Mierz elementy potomne bez ścisłych ograniczeń

Zmierz każdy chip z użyciem wartości maxWidth rodzica, ale bez minimalnej szerokości, aby chipy dopasowywały się do zawartości zamiast rozciągać się na całą szerokość.

val placeables = measurables.map {
  it.measure(constraints.copy(minWidth = 0))
}

Śledź szerokość bieżącego wiersza

Przejdź po obiektach placeable i śledź bieżącą szerokość wiersza. Każdy dodany chip zwiększa ją o własną szerokość.

Zawijaj, gdy wiersz się przepełni

Jeśli dodanie następnego chipa przekroczyłoby wartość maxWidth, wyzeruj szerokość wiersza i przesuń się w dół o wysokość najwyższego chipa w ukończonym wierszu.

if (rowWidth + placeable.width > maxWidth) {
  y += rowHeight
  rowWidth = 0
}

Zapamiętaj pozycję każdego chipa

Podczas przechodzenia zapisz wybrane współrzędne x i y każdego chipa na liście. Podczas rozmieszczania odtworzysz te pozycje.

Oblicz całkowitą wysokość

Po ostatnim wierszu wysokość układu to końcowa wartość y powiększona o wysokość tego wiersza. Szerokość jest po prostu równa wartości maxWidth z constraints.

Zgłoś rozmiar i umieść chipy

Wywołaj layout z całkowitą szerokością i wysokością, a następnie przejdź po zapamiętanych pozycjach, wywołując placeRelative dla każdego obiektu placeable.

layout(maxWidth, totalHeight) {
  placeables.forEachIndexed { i, p ->
    p.placeRelative(positions[i])
  }
}

Dodaj odstępy poziome

Wstaw małą przerwę między chipami, dodając wartość spacing do szerokości wiersza po każdym chipie. Odstępy pionowe działają tak samo.

Compose również udostępnia FlowRow

Oficjalny FlowRow z biblioteki układów wykonuje to wszystko za Ciebie. Samodzielne zbudowanie go pokazuje dokładnie, jak ta funkcja działa od środka. ✨

FlowRow { Chip("Kotlin"); Chip("Compose") }

Zbudowano rzeczywisty układ

Zmierzono elementy potomne, zawinięto wiersze zgodnie z szerokością i ręcznie umieszczono każdy chip. To gotowy do użycia niestandardowy układ zbudowany od podstaw. 🎉

Szybkie sprawdzenie

Co powoduje rozpoczęcie nowego wiersza przez flow row?

Odpowiedz w interaktywnej lekcji

Podsumowanie: FlowRow zawijający chipy

Zmierzono chipy bez ścisłych ograniczeń, śledzono szerokość wiersza i przy przepełnieniu zawijano elementy do nowego wiersza, a następnie umieszczano każdy z nich. To FlowRow zbudowany od podstaw. ✅

Bezpłatny start

Ucz się Kotlin 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: 30
Lekcje: 120

Zacznij naukę bezpłatnie Wyświetl pełny kurs

Często zadawane pytania

Czy lekcja „FlowRow z zawijanymi chipami” jest bezpłatna?

Tak — pełny tekst „FlowRow z zawijanymi chipami” 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 Jetpack Compose Academy, przejdź na CoddyKit PRO. Kurs Jetpack Compose Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „FlowRow z zawijanymi chipami”?

Zbuduj od podstaw rzeczywisty układ zawijany Ćwiczysz Jetpack Compose Academy 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ąć Jetpack Compose Academy?

Nie wymagamy żadnego doświadczenia. Jetpack Compose Academy 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 „FlowRow z zawijanymi chipami”?

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 Jetpack Compose Academy?

Tak. Każda lekcja Jetpack Compose Academy 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

← Powrót do Jetpack Compose Academy