Aşamaya göre değiştirici dökümü

Jetpack Compose, değiştiricileri farklı aşamalarda yürütür. Aşağıdaki dökümde, yaygın değiştiricilerin hangi aşamaya ait olduğu ve bağımsız değişkenlerinin veya lambda'larının ne zaman değerlendirildiği gösterilmektedir.

1. aşama: Kompozisyon aşaması

Bu değiştiriciler, bağımsız değişkenleri @Composable gövdesinde eşzamanlı olarak değerlendirir. Burada okunan herhangi bir durum, Composable yeniden başlatma kapsamıyla bir bağımlılık kaydeder ve değiştiğinde tam bir yeniden oluşturma tetikler.

  • Sabit Boyut ve Boyutlandırma Değiştiricileri:
    • 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) ( RowScope veya ColumnScope)
    • Modifier.width(IntrinsicSize.Min / Max)
    • Modifier.height(IntrinsicSize.Min / Max)
  • Statik Boşluk ve İç Kenarlar:
    • Modifier.padding(all = dp), Modifier.padding(start, top, end, bottom)
    • Modifier.windowInsetsPadding(insets), Modifier.statusBarsPadding()
  • Doğrudan Değer Görsel Değiştiricileri:
    • Modifier.alpha(float) (oluşturma sırasında durumu okur)
    • Modifier.rotate(degrees) (oluşturma sırasında durumu okur)
    • Modifier.scale(scaleX, scaleY) (oluşturma sırasında durumu okur)
    • Modifier.background(color = Color, shape = Shape)
    • Modifier.border(width, color, shape)
    • Modifier.shadow(elevation, shape)
    • Modifier.clip(shape)
    • Modifier.blur(radius)
  • Statik Konum Değiştiricileri:
    • Modifier.offset(x = dp, y = dp) (doğrudan değer aşırı yüklenmesi)
    • Modifier.absoluteOffset(x = dp, y = dp)
  • Dinamik Birleştirilebilir Değiştiriciler:
    • Modifier.composed { ... } (oluşturma sırasında fabrika gövdesini çalıştırır)

2. aşama: Düzen aşaması

Düzen aşaması, ayrı geçersiz kılma kapsamlarına sahip iki farklı alt adıma ayrılır:

Adım 2A: Ölçüm

Boyutu (width, height) ve kısıtlamaları belirler. Burada okunan durum, yeniden ölçümü ve yeniden yerleştirmeyi tetikler:

  • Modifier.layout { measurable, constraints -> ... }: Ölçüm sırasında layout(w, h) öncesindeki kod yürütülür.

2B adımı: Yerleştirme ve düzen geri aramaları

(x, y) koordinat konumunu belirler. Burada okunan durum, yalnızca yeniden yerleştirmeyi tetikler (ölçüm ve bileşim atlanır):

  • Modifier.offset { IntOffset(x, y) } (lambda aşırı yüklenmesi)
  • Modifier.absoluteOffset { IntOffset(x, y) } (lambda aşırı yüklenmesi)
  • Modifier.layout { ... layout(w, h) { placeable.place(x, y) } }: layout(w, h) { ... } bloğunun içindeki kod.
  • Modifier.onPlaced { layoutCoordinates -> ... }: Yerleştirme sırasında üst koordinatlar belirlendikten sonra çağrılır.
  • Modifier.onSizeChanged { intSize -> ... }: Boyut değiştiyse düzen ölçümü tamamlandıktan sonra çağrılır.
  • Modifier.onGloballyPositioned { layoutCoordinates -> ... }: Tüm pencere düzeni geçişi tamamlandıktan sonra çağrılır.

3. aşama: Çizim aşaması

Bu değiştiriciler, tuval çizimi sırasında yürütülür. Bu blokların içinde okunan durum, hem Bileşim hem de Düzen'i atlayarak yalnızca çizim geçişini çalıştırır:

  • Modifier.graphicsLayer { ... }:
    • Lambda'da güncellenen özellikler: alpha, translationX, translationY, scaleX, scaleY, rotationX, rotationY, rotationZ, shadowElevation, shape, clip, renderEffect, transformOrigin.
  • Modifier.drawBehind { ... }:
    • Canvas komutlarını composable içeriğin arkasına çizer.
  • Modifier.drawWithContent { ... }:
    • drawContent() ile çizim sırasını kontrol eder.
  • Modifier.drawWithCache { ... }:
    • Dış blok, Path, Paint veya Brush nesnelerini önbelleğe almak için boyut ya da düzen değişikliklerinde çalışır. onDrawBehind veya onDrawWithContent, her kare çiziminde çalışır.

Yeniden oluşturma döngüsünün dışında - gözlem değiştiricileri

Bazı değiştiriciler, erişilebilirlik, kullanıcı girişi ve yaşam döngüsü gözlemlerini işlemek için üç çerçeve aşamasının dışında çalışır.

Semantik ve erişilebilirlik

Erişilebilirlik hizmetleri (TalkBack) ve test için anlamsal özellikleri işler:

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

Giriş, hareketler ve etkinlikler

Üç aşamalı çerçeve oluşturma ardışık düzeninin dışında çalışır, OS hareket etkinliklerini ve kullanıcı etkileşimlerini alır:

  • 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 -> ... }: Geri çağırma, bir composable'ın görünürlüğü yapılandırılmış gecikmeden sonra bir eş yordamda değiştiğinde çağrılır.

Hızlı Referans: Değer ve Lambda fazı

Bir lambda tanımında durum değerinin okunması, okuma işlemini daha sonraki bir aşamaya erteler. Bu durumda, durum değiştiğinde önceki aşamalar atlanır:

Değiştirici/Desen (Modifier/Pattern) Doğrudan Değer (Bileşim) Lambda varyantı (ertelenen aşama) Durum Değiştiğinde
Offset Modifier.offset(x, y) Modifier.offset { IntOffset(x, y) } Düzen (Yerleşim) (Kompozisyonu Atlar)
Alfa / Opaklık Modifier.alpha(alpha) Modifier.graphicsLayer { this.alpha = alpha } Çizim (Kompozisyon ve Düzen atlanır)
Döndürme Modifier.rotate(degrees) Modifier.graphicsLayer { rotationZ = degrees } Çizim (Kompozisyon ve Düzen atlanır)
Scale Modifier.scale(scale) Modifier.graphicsLayer { scaleX = s; scaleY = s } Çizim (Kompozisyon ve Düzen atlanır)
Translation Modifier.padding(...) Modifier.graphicsLayer { translationX = ... } Çizim (Kompozisyon ve Düzen atlanır)
Arka plan rengi Modifier.background(color) Modifier.drawBehind { drawRect(color) } Çizim (Kompozisyon ve Düzen atlanır)
Kaydırma / Paralaks Modifier.offset(scroll.dp) Modifier.offset { IntOffset(0, scroll) } Düzen (Yerleşim) (Kompozisyonu Atlar)

Modifier.Node arayüzü eşlemesi

Yüksek performanslı Modifier.Node API'yi kullanan özel değiştiriciler için aşamalar doğrudan düğüm özelliği arayüzleriyle eşlenir:

Aşama Modifier.Node Arayüz Temel Yöntemler
Düzen (Ölçme ve Yerleştirme) LayoutModifierNode measure(measurable, constraints)
Düzen (Global Koordinatlar) GlobalPositionAwareModifierNode onGloballyPositioned(coordinates)
Düzen (Yerleşim) LayoutAwareModifierNode onRemeasured(size), onPlaced(coordinates)
Çizim DrawModifierNode draw(ContentDrawScope)
Giriş / İşaretçi PointerInputModifierNode onPointerEvent(...), onCancelPointerInput()
Anlamsal Yapı SemanticsModifierNode applySemantics(SemanticsPropertyReceiver)
Odaklanma (Focus) FocusEventModifierNode onFocusEvent(focusState)