Zestawienie modyfikatorów według etapu

Jetpack Compose wykonuje modyfikatory w różnych fazach. Poniższe zestawienie pokazuje, do której fazy należą typowe modyfikatory i kiedy są obliczane ich argumenty lub wyrażenia lambda.

Faza 1. Faza kompozycji

Te modyfikatory oceniają argumenty synchronicznie w @Composable treści. Każdy odczytany tu stan rejestruje zależność od zakresu ponownego uruchomienia funkcji Composable i po zmianie wywołuje pełną rekompozycję.

  • Statyczny wymiar i modyfikatory rozmiaru:
    • Modifier.size(dp), Modifier.width(dp), Modifier.height(dp)
    • Modifier.fillMaxSize(), Modifier.fillMaxWidth(), Modifier.fillMaxHeight()
    • Modifier.wrapContentSize(), Modifier.wrapContentWidth(), Modifier.wrapContentHeight()
    • Modifier.requiredSize(), Modifier.defaultMinSize()
    • Modifier.aspectRatio(ratio)
    • Modifier.weight(weight) (w RowScope lub ColumnScope)
    • Modifier.width(IntrinsicSize.Min / Max)
    • Modifier.height(IntrinsicSize.Min / Max)
  • Stałe odstępy i wstawki:
    • Modifier.padding(all = dp), Modifier.padding(start, top, end, bottom)
    • Modifier.windowInsetsPadding(insets), Modifier.statusBarsPadding()
  • Modyfikatory wizualne wartości bezpośredniej:
    • Modifier.alpha(float) (odczytuje stan podczas komponowania)
    • Modifier.rotate(degrees) (odczytuje stan podczas komponowania)
    • Modifier.scale(scaleX, scaleY) (odczytuje stan podczas komponowania)
    • Modifier.background(color = Color, shape = Shape)
    • Modifier.border(width, color, shape)
    • Modifier.shadow(elevation, shape)
    • Modifier.clip(shape)
    • Modifier.blur(radius)
  • Statyczne modyfikatory pozycji:
    • Modifier.offset(x = dp, y = dp) (przekroczenie bezpośredniej wartości)
    • Modifier.absoluteOffset(x = dp, y = dp)
  • Dynamiczne modyfikatory złożone:
    • Modifier.composed { ... } (uruchamia fabryczny kod podczas tworzenia kompozycji)

Etap 2. Etap układu

Faza układu jest podzielona na 2 odrębne podetapy z osobnymi zakresami unieważniania:

Krok 2A. Pomiar

Określa rozmiar (width, height) i ograniczenia. Stan odczytany w tym miejscu powoduje ponowny pomiar i ponowne umieszczenie:

  • Modifier.layout { measurable, constraints -> ... }: kod przed layout(w, h) jest wykonywany podczas pomiaru.

Krok 2B. Wywołania zwrotne dotyczące miejsca docelowego i układu

Określa pozycję współrzędnej (x, y). Odczytanie stanu w tym miejscu powoduje tylko ponowne umieszczenie (z pominięciem pomiaru i kompozycji):

  • Modifier.offset { IntOffset(x, y) } (przeciążenie funkcji lambda)
  • Modifier.absoluteOffset { IntOffset(x, y) } (przeciążenie funkcji lambda)
  • Modifier.layout { ... layout(w, h) { placeable.place(x, y) } }: kod wewnątrz bloku layout(w, h) { ... }.
  • Modifier.onPlaced { layoutCoordinates -> ... }: wywoływana po określeniu współrzędnych elementu nadrzędnego podczas umieszczania.
  • Modifier.onSizeChanged { intSize -> ... }: wywoływana po zakończeniu pomiaru układu, jeśli rozmiar uległ zmianie.
  • Modifier.onGloballyPositioned { layoutCoordinates -> ... }: Wywoływana po zakończeniu całego procesu układu okna.

Faza 3. Faza rysowania

Te modyfikatory są wykonywane podczas rysowania w obszarze roboczym. Odczyt stanu w tych blokach pomija zarówno kompozycję, jak i układ, wykonując tylko fazę rysowania:

  • Modifier.graphicsLayer { ... }:
    • Właściwości zaktualizowane w funkcji Lambda: alpha, translationX, translationY, scaleX, scaleY, rotationX, rotationY, rotationZ, shadowElevation, shape, clip, renderEffect, transformOrigin.
  • Modifier.drawBehind { ... }:
    • Rysuje polecenia Canvas za treścią funkcji kompozycyjnej.
  • Modifier.drawWithContent { ... }:
    • Określa kolejność rysowania za pomocą drawContent().
  • Modifier.drawWithCache { ... }:
    • Blok zewnętrzny jest uruchamiany w przypadku zmian rozmiaru lub układu, aby buforować obiekty Path, Paint lub Brush; onDrawBehind lub onDrawWithContent jest uruchamiany przy każdym rysowaniu klatki.

Poza pętlą rekompozycji – modyfikatory obserwacji

Niektóre modyfikatory działają poza 3 fazami klatek, aby obsługiwać ułatwienia dostępu, dane wejściowe użytkownika i obserwacje cyklu życia.

Semantyka i ułatwienia dostępu

Przetwarza właściwości semantyczne na potrzeby usług ułatwień dostępu (TalkBack) i testowania:

  • Modifier.semantics { ... }
  • Modifier.clearAndSetSemantics { ... }

Dane wejściowe, gesty i zdarzenia

Działa poza 3-fazowym potokiem renderowania klatek, odbierając zdarzenia ruchu systemu operacyjnego i interakcje użytkownika:

  • Modifier.pointerInput(key) { detectTapGestures { ... } } / detectDragGestures / awaitPointerEventScope
  • Modifier.clickable(enabled, onClickLabel) { ... }
  • Modifier.combinedClickable { ... }
  • Modifier.toggleable { ... }
  • Modifier.selectable { ... }
  • Modifier.draggable(...) / Modifier.scrollable(...) / Modifier.draggable2D(...)
  • Modifier.onFocusChanged { focusState -> ... }
  • Modifier.onKeyEvent { keyEvent -> ... }
  • Modifier.onVisibilityChanged { isVisible -> ... }: wywołanie zwrotne jest wywoływane, gdy widoczność komponentu zmienia się po skonfigurowanym opóźnieniu w korutynie.

Szybkie omówienie: faza wartości a faza lambda

Odczytanie wartości stanu w funkcji lambda odracza odczyt do późniejszej fazy, która pomija wcześniejsze fazy, gdy ten stan się zmieni:

Modyfikator / wzorzec Wartość bezpośrednia (struktura) Wariant Lambda (faza odroczona) Gdy stan się zmieni
Przesunięcie Modifier.offset(x, y) Modifier.offset { IntOffset(x, y) } Układ (miejsce docelowe) (pomija kompozycję)
Alfa / Przezroczystość Modifier.alpha(alpha) Modifier.graphicsLayer { this.alpha = alpha } Rysunek (pomija kompozycję i układ)
Obrót Modifier.rotate(degrees) Modifier.graphicsLayer { rotationZ = degrees } Rysunek (pomija kompozycję i układ)
Skala Modifier.scale(scale) Modifier.graphicsLayer { scaleX = s; scaleY = s } Rysunek (pomija kompozycję i układ)
Tłumaczenie Modifier.padding(...) Modifier.graphicsLayer { translationX = ... } Rysunek (pomija kompozycję i układ)
Kolor tła Modifier.background(color) Modifier.drawBehind { drawRect(color) } Rysunek (pomija kompozycję i układ)
Przewijanie / paralaksa Modifier.offset(scroll.dp) Modifier.offset { IntOffset(0, scroll) } Układ (miejsce docelowe) (pomija kompozycję)

Mapowanie interfejsu Modifier.Node

W przypadku niestandardowych modyfikatorów korzystających z interfejsu API Modifier.Node o wysokiej wydajności fazy są mapowane bezpośrednio na interfejsy możliwości węzła:

Faza Modifier.Node Interfejs Metody treningu mięśni głębokich
Układ (pomiar i umiejscowienie) LayoutModifierNode measure(measurable, constraints)
Układ (współrzędne globalne) GlobalPositionAwareModifierNode onGloballyPositioned(coordinates)
Układ (miejsce docelowe) LayoutAwareModifierNode onRemeasured(size), onPlaced(coordinates)
Rysunek DrawModifierNode draw(ContentDrawScope)
Dane wejściowe / wskaźnik PointerInputModifierNode onPointerEvent(...), onCancelPointerInput()
Semantyka SemanticsModifierNode applySemantics(SemanticsPropertyReceiver)
Ostrość FocusEventModifierNode onFocusEvent(focusState)