Android Academy · Lekcja

Column, Row i Box

Układaj funkcje composable we właściwych układach

Column, Row i Box to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 1 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 Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Rozmieszczanie composable

Aby umieszczać composable względem siebie, Compose udostępnia trzy podstawowe composable układu: Column, Row i Box.

Column: układ pionowy

Column układa elementy podrzędne pionowo, od góry do dołu.

Column {
    Text("First")
    Text("Second")
    Text("Third")
}

Row: układ poziomy

Row umieszcza elementy podrzędne obok siebie, od lewej do prawej.

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

Box: nakładanie elementów

Box układa elementy podrzędne jeden na drugim, niczym warstwy. Późniejsze elementy są rysowane nad wcześniejszymi. Doskonale nadaje się do plakietek, nakładek i teł.

Box {
    Image(
        painter = painterResource(R.drawable.photo),
        contentDescription = null
    )
    Text("Caption")
}

Elementy podrzędne są lambdami content

Każdy układ przyjmuje końcową lambdę content. Wszystkie composable wywołane w jej wnętrzu stają się jego elementami podrzędnymi. Nie ma tutaj XML — elementy podrzędne są po prostu wywołaniami funkcji.

Zagnieżdżanie układów

Układy można swobodnie zagnieżdżać. Należy umieścić Row wewnątrz Column, aby utworzyć strukturę przypominającą siatkę lub listę wierszy.

Column {
    Row {
        Text("A")
        Text("B")
    }
    Row {
        Text("C")
        Text("D")
    }
}

Column a LinearLayout

Jeśli używali Państwo XML, Column przypomina pionowy LinearLayout, a Row — poziomy. Box przypomina prosty FrameLayout.

Domyślny rozmiar

Domyślnie układ ma tylko taki rozmiar, jak jego elementy podrzędne (wrap content). Można sprawić, aby wypełniał dostępną przestrzeń, używając modyfikatorów takich jak Modifier.fillMaxSize(), omówionych w następnej lekcji.

contentAlignment w Box

Box może wyrównywać wszystkie elementy podrzędne za pomocą contentAlignment. Można na przykład wyśrodkować wszystko.

Box(contentAlignment = Alignment.Center) {
    Text("Centered")
}

Wybór właściwego układu

Wyboru należy dokonać na podstawie kierunku: Column służy do układu pionowego, Row do poziomego, a Box do nakładania elementów lub wyśrodkowania pojedynczego elementu. Większość ekranów łączy wszystkie trzy układy.

Składanie wszystkiego w całość

Niewielki układ profilu wykorzystujący wszystkie trzy układy.

@Composable
fun Profile() {
    Column {
        Box(contentAlignment = Alignment.Center) {
            Image(
                painter = painterResource(R.drawable.avatar),
                contentDescription = null
            )
        }
        Row {
            Text("Posts ")
            Text("Followers")
        }
    }
}

Szybkie sprawdzenie

Który układ umieszcza elementy podrzędne jeden na drugim (nakłada je na siebie)?

Podsumowanie

Trzy podstawowe układy:

Column — układ pionowy.
Row — układ poziomy.
Box — nakładające się warstwy; contentAlignment wyśrodkowuje zawartość.

Można je swobodnie zagnieżdżać, aby budować dowolny ekran.

Często zadawane pytania

Czy lekcja „Column, Row i Box” jest bezpłatna?

Tak — pełny tekst „Column, Row i Box” 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 Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Column, Row i Box”?

Układaj funkcje composable we właściwych układach Ćwiczysz Android 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ąć Android Academy?

Nie wymagamy żadnego doświadczenia. Android 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 1 z 4.

Ile czasu zajmuje lekcja „Column, Row i Box”?

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 Android Academy?

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