Pisanie funkcji Composable Layout
Mierz elementy podrzędne i rozmieszczaj je ręcznie
Pisanie funkcji Composable Layout 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.
Poznaj composable Layout
Aby zbudować własny sposób rozmieszczania elementów, należy użyć composable Layout. Udostępnia on bezpośrednio pełną kontrolę nad mierzeniem i rozmieszczaniem. 🛠️
Layout przyjmuje content i lambdę
Layout przyjmuje elementy potomne content oraz lambdę mierzącą. Lambda otrzymuje obiekty measurables i constraints, z którymi ma pracować.
Layout(content = content,
modifier = modifier) { measurables, constraints ->
// measure and place
}Krok pierwszy: zmierz elementy potomne
Wewnątrz lambdy należy przejść po obiektach measurables i zmierzyć każdy z nich. W wyniku otrzymuje się listę obiektów placeables o znanych rozmiarach.
val placeables = measurables.map { it.measure(constraints) }Krok drugi: określ własny rozmiar
Teraz należy obliczyć, jak duży powinien być układ. W przypadku stosu pionowego wysokość to suma wysokości elementów potomnych, a szerokość odpowiada szerokości najszerszego elementu.
val height = placeables.sumOf { it.height }
val width = placeables.maxOf { it.width }Krok trzeci: zgłoś rozmiar za pomocą layout()
Wywołaj layout(width, height), aby określić rozmiar układu. Końcowa lambda służy do faktycznego rozmieszczenia każdego elementu potomnego.
layout(width, height) {
// placement goes here
}Krok czwarty: umieść każdy element potomny
Należy śledzić bieżące przesunięcie y i umieszczać każdy obiekt placeable pod poprzednim. Po każdym wywołaniu placeRelative trzeba dodać jego wysokość do przesunięcia.
var y = 0
placeables.forEach {
it.placeRelative(0, y)
y += it.height
}Właśnie odtworzono Column
Układanie elementów potomnych od góry do dołu to dokładnie działanie Column. Udało się teraz napisać od podstaw układ zachowujący się tak samo. 🎉
Owiń go w funkcję wielokrotnego użytku
Umieść wywołanie Layout wewnątrz funkcji @Composable, aby inni mogli używać jej tak jak dowolnego wbudowanego elementu. Udostępnij modifier i gniazdo content.
@Composable
fun MyColumn(modifier: Modifier = Modifier,
content: @Composable () -> Unit) { }Przekaż dalej Modifier
Przekaż otrzymany modifier do wywołania Layout. Dzięki temu wywołujący mogą dodawać padding, rozmiar i tło, tak jak w przypadku rzeczywistych układów.
Ustaw domyślną wartość parametru Modifier
Ustaw domyślną wartość parametru modifier na Modifier. Wywołujący, którzy nie potrzebują dodatkowego stylowania, mogą go pominąć, dzięki czemu API pozostaje przejrzyste i wygodne.
Teraz można dostosować wszystko
Zmiana obliczeń pozycji pozwala tworzyć ukośne stosy, wyśrodkowane wiersze lub siatki. Composable Layout jest pustym płótnem do rozmieszczania elementów.
Szybkie sprawdzenie
Jaka metoda faktycznie umieszcza zmierzony element potomny na ekranie?
Podsumowanie: pisanie composable układu
Wewnątrz Layout mierzysz elementy potomne, uzyskując obiekty placeable, wywołujesz layout(), aby ustawić rozmiar, a następnie wywołujesz placeRelative dla każdego elementu. Owiń całość w funkcję, aby można było jej używać ponownie. ✅
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
Często zadawane pytania
Czy lekcja „Pisanie funkcji Composable Layout” jest bezpłatna?
Tak — pełny tekst „Pisanie funkcji Composable Layout” 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 „Pisanie funkcji Composable Layout”?
Mierz elementy podrzędne i rozmieszczaj je ręcznie Ć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 „Pisanie funkcji Composable Layout”?
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
- Model pomiaru i rozmieszczania
- Pisanie funkcji Composable Layout
- Ograniczenia i pomiary intrinsic
- FlowRow z zawijanymi chipami