Jetpack Compose Academy · Lekcja

Row: układanie elementów obok siebie

Układaj elementy podrzędne od lewej do prawej

Lekcja 2 z 413 kroki

Row: układanie elementów obok siebie to bezpłatna lekcja Jetpack Compose Academy na CoddyKit. To lekcja 2 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.

Obok siebie

Gdy elementy potomne mają znaleźć się w poziomym wierszu, użyj Row. To poziomy odpowiednik Column. ➡️

Pierwszy Row

Row przyjmuje końcową lambdę, podobnie jak Column. Każdy wywołany w nim element potomny trafia obok poprzedniego, od lewej do prawej.

Row {
    Text("Left")
    Text("Right")
}

Kolejność przebiega od lewej do prawej

Elementy potomne przepływają przez ekran w kolejności w kodzie źródłowym. Pierwszy composable znajduje się na początku, następny obok niego i tak dalej.

Klasyczna ikona z etykietą

Row świetnie nadaje się do małych par, takich jak Icon obok etykiety Text. To zestawienie obok siebie jest powszechne w rzeczywistych aplikacjach.

Row {
    Icon(Icons.Default.Star, null)
    Text("Favorite")
}

Odstępy między elementami potomnymi

Użyj horizontalArrangement wraz z spacedBy, aby wstawić równy odstęp między każdym elementem zamiast dodawać padding po kolei.

Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("A")
    Text("B")
}

Wyrównywanie elementów w pionie

Ustaw verticalAlignment, aby wyrównać elementy na wysokości wiersza. CenterVertically utrzymuje ikonę i wysoki tekst w równym pionowym położeniu.

Row(verticalAlignment = Alignment.CenterVertically) {
    Icon(Icons.Default.Star, null)
    Text("Centered")
}

Rozsuwanie elementów

Arrangement.SpaceBetween przypina pierwszy element do początku, a ostatni do końca, rozdzielając między nimi całą dodatkową przestrzeń.

Row(horizontalArrangement = Arrangement.SpaceBetween) {
    Text("Start")
    Text("End")
}

Współdzielenie przestrzeni za pomocą weight

Przypisz elementowi weight w jego modyfikatorze, aby zajął pozostałą szerokość. Dwie równe wartości weight podzielą wiersz po równo.

Row {
    Text("Half", Modifier.weight(1f))
    Text("Half", Modifier.weight(1f))
}

Row jeszcze nie przewija

Zwykły Row nie przewija zawartości. Elementy wykraczające poza szerokość zostaną przycięte, dlatego podstawowego Row należy używać dla zawartości, która się mieści.

Dodawanie przewijania w poziomie

W przypadku szerokiej zawartości dodaj horizontalScroll do modyfikatora Row, a cały pasek będzie można przewijać gestem na boki.

Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
    Text("Wide content")
}

Rows wewnątrz Columns

Większość ekranów łączy oba układy. Column układa sekcje pionowo, a każda sekcja używa Row do rozmieszczania elementów obok siebie.

Szybkie sprawdzenie

Sprawdźmy, jak Row rozmieszcza swoje elementy potomne.

Odpowiedz w interaktywnej lekcji

Podsumowanie: Row

Poznano Row: umieszcza elementy potomne od lewej do prawej, używa arrangement i alignment do ich pozycjonowania oraz współdzieli szerokość za pomocą weight na potrzeby elastycznych układów.

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 „Row: układanie elementów obok siebie” jest bezpłatna?

Tak — pełny tekst „Row: układanie elementów obok siebie” 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 „Row: układanie elementów obok siebie”?

Układaj elementy podrzędne od lewej do prawej Ć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 2 z 4.

Ile czasu zajmuje lekcja „Row: układanie elementów obok siebie”?

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