Ta strona została przetłumaczona przez Cloud Translation API.

Kolejność ograniczeń i modyfikatorów

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. — **Rysunek 1.** Modyfikatory opakowujące węzły układu w drzewie interfejsu.

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. — **Rysunek 2.** Ta sama struktura drzewa co na rys. 1, ale z elementami kompozycyjnymi Drzewo UI przedstawione jako łańcuchy modyfikatorów.

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. — **Rys. 3.** Ograniczone ograniczenia.

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. — **Rysunek 4.** Nieograniczone ograniczenia.

Ś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. — **Rysunek 5.** Ścisłe ograniczenia.

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. — **Rysunek 6.** Kombinacje ograniczonych i nieograniczonych ograniczeń oraz dokładnych szerokości i wzgórz.

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. — **Rysunek 7.** Ograniczone ograniczenia w drzewie interfejsu i jego reprezentacja w kontenera.

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. — **Rysunek 8.** Modyfikator `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. — **Rysunek 9.** Modyfikator `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. — **Rysunek 10.** Łańcuch dwóch modyfikatorów `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
. — **Rysunek 11.** Modyfikator `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ą. — **Rysunek 12.** Modyfikatory `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. — **Rysunek 13.** Modyfikator `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)
)ConstraintsModifiersSnippets.kt

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 i 200dp i wzrostu.
Choć modyfikator size chce używać rozmiaru 50dp, nadal potrzebuje aby zachować zgodność z przychodzącymi minimalnymi ograniczeniami. Modyfikator size zwraca też dokładne granice ograniczenia 300 x 200, co skutkuje ignoruje wartość podaną w modyfikatorze size.
Image postępuje zgodnie z tymi granicami i raportuje rozmiar 300 według parametru 200, który przebiega aż do samego końca drzewa.

Image(
    painterResource(R.drawable.hero),
    contentDescription = null,
    Modifier
        .fillMaxSize()
        .wrapContentSize()
        .size(50.dp)
)ConstraintsModifiersSnippets.kt

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 i 200dp w wysokość.
Modyfikator wrapContentSize resetuje minimalne ograniczenia. Chociaż chociaż Reguła fillMaxSize 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 granice 50
Pole Image przyjmuje rozmiar 50 na 50 oraz modyfikator size 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)
)ConstraintsModifiersSnippets.kt

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 na 100dp.
- Image jest zgodny z tymi ograniczeniami i zgłasza rozmiar 100 przez 100dp
- Modyfikator padding dodaje wartość 10dp do wszystkich rozmiarów, więc zwiększa on raportowanie szerokość i wysokość o 20dp.
- Na etapie rysowania modyfikator clip działa na obszarze roboczym 120 przez 120dp Tworzy on więc maskę koła o tym rozmiarze.
- Modyfikator padding wstawia treść za pomocą funkcji 10dp we wszystkich rozmiarach, przez co zmniejsza rozmiar obszaru roboczego do 100 o 100dp.
- W tym obszarze roboczym narysowany jest element Image. Obraz jest przycinany na podstawie pierwotny okrąg 120dp, więc wynikiem nie jest okrąg.