W narzędziu Compose możesz połączyć wiele modyfikatorów, aby zmienić wygląd efektu kompozycyjnego. Te łańcuchy modyfikatorów mogą wpływać na przekazywane ograniczenia do elementów kompozycyjnych, które określają granice szerokości i wysokości.
Na tej stronie opisujemy, jak modyfikatory łańcuchowe wpływają na ograniczenia oraz i rozmieszczanie kompozycji.
Modyfikatory w drzewie interfejsu
Aby zrozumieć, jak modyfikatory wpływają na siebie nawzajem, warto zwizualizować pojawią się w drzewie interfejsu, które jest generowane na etapie tworzenia kompozycji. Dla: więcej informacji znajdziesz w sekcji Kompozycje.
W drzewie interfejsu możesz zwizualizować modyfikatory jako węzły otoki układu. węzłów:
![Kod elementów kompozycyjnych i modyfikatorów oraz ich wizualna reprezentacja w postaci drzewa interfejsu.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/modifier-wrapping.png?authuser=19&hl=pl)
Dodanie więcej niż 1 modyfikatora do funkcji kompozycyjnej powoduje utworzenie łańcucha modyfikatorów. Kiedy
łańcuch wielu modyfikatorów, każdy węzeł modyfikatora owija resztę łańcucha
i węzeł układu w obrębie. Na przykład: gdy łączysz elementy clip
i
size
, węzeł modyfikatora clip
opakowuje węzeł modyfikujący size
,
który następnie opakowuje węzeł układu Image
.
Na etapie układu algorytm, który spaceruje po drzewie, pozostaje taki sam, ale każdy węzeł modyfikujący. W ten sposób modyfikator może zmienić rozmiar wymagań i umiejscowienia węzła modyfikatora lub układu, który jest opakowany.
Jak widać na rys. 2, implementacja elementów kompozycyjnych Image
i Text
składają się z łańcucha modyfikatorów obejmujących jeden węzeł układu.
wdrożenia Row
i Column
to po prostu węzły układu, które opisują,
ułożyć swoje dzieci.
![Dotychczasowa struktura drzewa, ale teraz każdy węzeł ma po prostu prosty układ z wieloma modyfikatorami otaczającymi węzły.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/composables-modifiers.png?authuser=19&hl=pl)
Podsumowując:
- Modyfikatory obejmują pojedynczy węzeł modyfikatora lub układu.
- Węzły układu mogą rozmieszczać wiele węzłów podrzędnych.
W sekcjach poniżej opisano, jak korzystać z tego modelu umysłowego, aby wyciągać wnioski łańcuchem modyfikatorów i jego wpływu na rozmiar elementów kompozycyjnych.
Ograniczenia na etapie układu
Etap układu wykorzystuje 3-etapowy algorytm, aby znaleźć każdy układ. szerokość i wysokość węzła oraz współrzędne x i y:
- Mierz elementy podrzędne: węzeł mierzy swoje elementy podrzędne, jeśli takie istnieją.
- Ustal własny rozmiar: na podstawie tych pomiarów węzeł decyduje sam rozmiaru.
- Umieść węzły podrzędne: każdy węzeł podrzędny jest umieszczany względem własnego węzła. pozycji.
Constraints
pomaga znaleźć odpowiednie rozmiary dla węzłów podczas pierwszych dwóch
kroków algorytmu. Ograniczenia określają minimalne i maksymalne granice
szerokości i wysokości węzła. Gdy węzeł określi swój rozmiar, jego mierzony rozmiar
powinna mieścić się w zakresie rozmiarów.
Typy ograniczeń
Ograniczenie może mieć jedną z tych wartości:
- Ograniczony: węzeł ma maksymalną i minimalną szerokość i wysokość.
![Ograniczone ograniczenia o różnych rozmiarach w kontenerze.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/bounded-constraints.png?authuser=19&hl=pl)
- Bez ograniczeń: węzeł nie jest ograniczony do żadnego rozmiaru. Maksymalna szerokość granice wysokości są ustawione na nieskończoność.
![Nieograniczone ograniczenia, których szerokość i wysokość są ustawione na nieskończoność. Ograniczenia wykraczają poza kontener.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/unbounded-constraints.png?authuser=19&hl=pl)
- Ścisły: węzeł ma spełniać wymagania dotyczące dokładnego rozmiaru. Minimalne i maksymalne granice są ustawione na tę samą wartość.
![Dokładne ograniczenia zgodne z wymaganym dokładnym rozmiarem w kontenerze.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/exact-constraints.png?authuser=19&hl=pl)
- Kombinacja: węzeł korzysta z kombinacji powyższych typów ograniczeń. Ograniczenie może na przykład ograniczać szerokość, umożliwiając jednocześnie nieograniczonej maksymalnej wysokości lub ustawić dokładną szerokość, ale podać ograniczoną wysokość.
![Dwa kontenery, które pokazują kombinacje ograniczonych i nieograniczonych ograniczeń oraz dokładne szerokości i wysokości.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/combination-constraints.png?authuser=19&hl=pl)
W następnej sekcji opisujemy, jak te ograniczenia są przekazywane z elementu nadrzędnego do dziecka.
Jak ograniczenia są przekazywane z zasady nadrzędnej do podrzędnej
W pierwszym kroku algorytmu opisanym w sekcji Ograniczenia w układzie etap, ograniczenia są przekazywane z elementu nadrzędnego do elementu podrzędnego w drzewie UI.
Gdy węzeł nadrzędny mierzy swoje elementy podrzędne, stosuje te ograniczenia do każdego żeby dziecko wiedziało, jak duże czy małe może być. Następnie, gdy decyduje o własnym rozmiarze, przestrzega też ograniczeń przekazywanych przez ma swoich rodziców.
Ogólnie algorytm działa w ten sposób:
- Aby określić rzeczywisty rozmiar, który ma zajmować, należy wybrać węzeł główny w drzewie interfejsu mierzy swoje elementy podrzędne i przekazuje te same ograniczenia do pierwszego elementu podrzędnego.
- Jeśli element podrzędny jest modyfikatorem, który nie ma wpływu na pomiary, przekazuje do następnego modyfikatora. Ograniczenia są przekazywane w dół modyfikatora łańcuch w niezmienionej postaci, chyba że zostanie osiągnięty modyfikator, który ma wpływ na pomiar. rozmiary są następnie odpowiednio dostosowywane.
- Gdy dotrzeć do węzła, który nie ma żadnych elementów podrzędnych (nazywanych „liśćmi” węzeł”), określa on swój rozmiar na podstawie przekazanych ograniczeń, zwraca ten rozmiar do elementu nadrzędnego.
- Wydawca nadrzędny dostosowuje swoje ograniczenia na podstawie pomiarów dziecka. wywołuje kolejne dziecko z tymi skorygowanymi ograniczeniami.
- Po zmierzeniu wartości wszystkich elementów podrzędnych węzła nadrzędnego i przekazuje tę informację swojemu elementowi nadrzędnemu.
- W ten sposób całe drzewo przechodzimy przede wszystkim na głębokości. Docelowo wszystkie węzły wybór rozmiarów i kończy się pomiar.
Szczegółowy przykład znajdziesz w artykule Ograniczenia i kolejność modyfikatorów. film.
Modyfikatory wpływające na ograniczenia
W poprzedniej sekcji wiesz, że niektóre modyfikatory mogą wpływać na ograniczenie rozmiaru. W poniższych sekcjach opisano konkretne modyfikatory, które wpływają .
Modyfikator size
Modyfikator size
deklaruje preferowany rozmiar treści.
Na przykład poniższe drzewo interfejsu powinno być renderowane w kontenerze 300dp
.
autor: 200dp
. Ograniczenia są ograniczone, co pozwala na szerokość od 100dp
do
300dp
oraz wysokość od 100dp
do 200dp
:
![Fragment drzewa UI z modyfikatorem rozmiaru obejmującym węzeł układu,
reprezentuje ograniczone ograniczenia ustawione przez modyfikator rozmiaru w kontenerze.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier.png?authuser=19&hl=pl)
Modyfikator size
dostosowuje przychodzące ograniczenia tak, aby pasowały do przekazywanej do niej wartości.
W tym przykładzie wartość to 150dp
:
![Tak samo jak na ilustracji 7, z tą różnicą, że modyfikator rozmiaru dostosowuje przychodzące ograniczenia do przekazywanej do niej wartości.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-2.png?authuser=19&hl=pl)
size
dostosowuje ograniczenia na 150dp
.Jeśli szerokość i wysokość są mniejsze niż najmniejsze ograniczenie ograniczenia lub jest większy niż największe ograniczenie, modyfikator pasuje do wartości jak najściślej z ograniczeniami, w:
![2 drzewa UI i odpowiadające im reprezentacje w kontenerach. W pierwszym z nich
modyfikator rozmiaru akceptuje rosnące ograniczenia; W drugiej modyfikator rozmiaru dostosowuje się do
zbyt duże ograniczenia, co skutkuje ograniczeniami wypełniającymi kontener.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-3.png?authuser=19&hl=pl)
size
zgodny z przekazanym ograniczeniem
jak to tylko możliwe.Pamiętaj, że łączenie wielu modyfikatorów size
nie działa. Pierwsze size
modyfikator ustawia minimalne i maksymalne ograniczenie na stałą wartość. Nawet jeśli
drugi modyfikator rozmiaru żąda rozmiaru mniejszego lub większego, nadal musi
przestrzegają dokładnych progów, które zostały podane, więc nie zastąpią tych wartości:
![łańcuch 2 modyfikatorów rozmiaru w drzewie UI i jego reprezentację w kontenerze;
który jest wynikiem pierwszej przekazanej wartości, a nie drugiej.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/size-modifier-4.png?authuser=19&hl=pl)
size
, w którym druga wartość została przekazana
in (50dp
) nie zastępuje pierwszej wartości (100dp
).Modyfikator requiredSize
Użyj modyfikatora requiredSize
zamiast size
, jeśli chcesz
w celu zastąpienia ograniczeń przychodzących. Modyfikator requiredSize
zastępuje funkcję
ograniczeń przychodzących i przekazuje określony przez Ciebie rozmiar jako dokładne granice.
Po przekazaniu rozmiaru z powrotem do drzewa, węzeł podrzędny zostanie wyśrodkowany w dostępne miejsce:
![rozmiar i wymagany modyfikator rozmiaru połączone w drzewie interfejsu oraz odpowiadający mu modyfikator rozmiaru.
w kontenerze. Wymagane ograniczenia modyfikatora rozmiaru zastępują te z modyfikatorem rozmiaru
.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/requiredsize-modifier.png?authuser=19&hl=pl)
requiredSize
zastępuje ograniczenia przychodzące z
modyfikatorem size
.Modyfikatory width
i height
Modyfikator size
dostosowuje zarówno szerokość, jak i wysokość ograniczeń. Na
modyfikatorem width
, można ustawić stałą szerokość, ale wysokość nie zostanie określona.
I podobnie, za pomocą modyfikatora height
, możesz ustawić stałą wysokość, ale pozostawisz
nieokreślona szerokość:
![2 drzewa UI – jedno z modyfikatorem szerokości i reprezentacją kontenera,
z modyfikatorem wysokości i jego reprezentacją.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/width-height-modifier.png?authuser=19&hl=pl)
width
i height
ustawiają stałą szerokość
i wysokość.Modyfikator sizeIn
Modyfikator sizeIn
umożliwia wyznaczanie dokładnych minimalnych i maksymalnych ograniczeń
szerokości i wysokości. Jeśli potrzebujesz szczegółowej kontroli, użyj modyfikatora sizeIn
ponad ograniczenia.
![Drzewo UI z modyfikatorem sizeIn z ustawioną minimalną i maksymalną szerokością i wysokością,
i jego reprezentacji w kontenerze.](https://developer.android.com/static/develop/ui/compose/images/layouts/constraints-modifiers/sizein-modifier.png?authuser=19&hl=pl)
sizeIn
z elementami minWidth
, maxWidth
, minHeight
i
Ustawiono maxHeight
.Przykłady
Ta sekcja przedstawia i objaśnia dane wyjściowe kilku fragmentów kodu, modyfikatory łańcuchowe.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .size(50.dp) )
Ten fragment kodu daje następujące dane wyjściowe:
- Modyfikator
fillMaxSize
zmienia ograniczenia, aby ustawić zarówno minimalna szerokość i wysokość do wartości maksymalnej –300dp
szerokości i200dp
i wzrostu. - Choć modyfikator
size
chce używać rozmiaru50dp
, nadal potrzebuje aby zachować zgodność z przychodzącymi minimalnymi ograniczeniami. Modyfikatorsize
zwraca też dokładne granice ograniczenia300
x200
, co skutkuje ignoruje wartość podaną w modyfikatorzesize
. Image
postępuje zgodnie z tymi granicami i raportuje rozmiar300
według parametru200
, który przebiega aż do samego końca drzewa.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .fillMaxSize() .wrapContentSize() .size(50.dp) )
Ten fragment kodu daje następujące dane wyjściowe:
- Modyfikator
fillMaxSize
dostosowuje ograniczenia, aby ustawić zarówno minimalne wartości, szerokość i wysokość do wartości maksymalnej –300dp
szerokości i200dp
w wysokość. - Modyfikator
wrapContentSize
resetuje minimalne ograniczenia. Chociaż chociaż RegułafillMaxSize
spowodowała stałe ograniczenia;wrapContentSize
przywraca ją ponownie do ograniczonych ograniczeń. Poniższy węzeł może teraz zajmować całą przestrzeń lub mniejsze od całego pokoju. - Modyfikator
size
ustawia ograniczenia na minimalne i maksymalne granice50
- Pole
Image
przyjmuje rozmiar50
na50
oraz modyfikatorsize
która je przekaże. - Modyfikator
wrapContentSize
ma specjalną właściwość. Czasem i umieszcza je w środku dostępnych minimalnych granic, i ją przesłałem. Rozmiar, jaki przekazuje rodzicom, jest równy określonych minimalnych progów.
Łącząc tylko trzy modyfikatory, można zdefiniować rozmiar elementów wyśrodkowuje go na elemencie nadrzędnym.
Image( painterResource(R.drawable.hero), contentDescription = null, Modifier .clip(CircleShape) .padding(10.dp) .size(100.dp) )
Ten fragment kodu daje następujące dane wyjściowe:
- Modyfikator
clip
nie zmienia ograniczeń.- Modyfikator
padding
obniża maksymalne ograniczenia. - Modyfikator
size
ustawia wszystkie ograniczenia na100dp
. Image
jest zgodny z tymi ograniczeniami i zgłasza rozmiar100
przez100dp
- Modyfikator
padding
dodaje wartość10dp
do wszystkich rozmiarów, więc zwiększa on raportowanie szerokość i wysokość o20dp
. - Na etapie rysowania modyfikator
clip
działa na obszarze roboczym120
przez120dp
Tworzy on więc maskę koła o tym rozmiarze. - Modyfikator
padding
wstawia treść za pomocą funkcji10dp
we wszystkich rozmiarach, przez co zmniejsza rozmiar obszaru roboczego do100
o100dp
. - W tym obszarze roboczym narysowany jest element
Image
. Obraz jest przycinany na podstawie pierwotny okrąg120dp
, więc wynikiem nie jest okrąg.
- Modyfikator