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:

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.

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:

1. Mierz elementy podrzędne: węzeł mierzy swoje elementy podrzędne, jeśli takie istnieją.
2. Ustal własny rozmiar: na podstawie tych pomiarów węzeł decyduje sam rozmiaru.
3. 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ść.

.

• Bez ograniczeń: węzeł nie jest ograniczony do żadnego rozmiaru. Maksymalna szerokość granice wysokości są ustawione na nieskończoność.

.

• Ścisły: węzeł ma spełniać wymagania dotyczące dokładnego rozmiaru. Minimalne i maksymalne granice są ustawione na tę samą wartość.

.

• 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ść.

.

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:

1. 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.
2. 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.
3. 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.
4. Wydawca nadrzędny dostosowuje swoje ograniczenia na podstawie pomiarów dziecka. wywołuje kolejne dziecko z tymi skorygowanymi ograniczeniami.
5. Po zmierzeniu wartości wszystkich elementów podrzędnych węzła nadrzędnego i przekazuje tę informację swojemu elementowi nadrzędnemu.
6. 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:

Modyfikator size dostosowuje przychodzące ograniczenia tak, aby pasowały do przekazywanej do niej wartości. W tym przykładzie wartość to 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:

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:

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:

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ść:

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.

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.