Kaydırılabilirden SabitlenmişDraggable'a Geçiş

Swipeable, alt sayfalar, çekmeceler veya kaydırarak kapatma gibi ayrı durumlar arasında kaydırılabilen bileşenler oluşturmanıza yardımcı olan bir Compose Material API'sidir. Bir bileşenin boyutuna bağlı olan sabitleme noktaları gibi gelişmiş kullanım alanlarını daha iyi desteklemek için Compose-Foundation 1.6.0-alpha01'de bir halef yayınlandı: AnchoredDraggable. AnchoredDraggable alt sayfalar, çekmeceler veya kaydırarak kapatma gibi sabit durumlarla sürüklenebilir bileşenler oluşturmak için kullanılan bir Foundation API'sidir.

Material'ın Swipeable API'lerinin desteği sonlandırıldı ve Foundation'ın AnchoredDraggable API'leri kullanılmaya başlandı. Bu API'ler gelecekteki bir sürümde kaldırılacak. Bu kılavuzda, Swipeable API'lerinden AnchoredDraggable'ye nasıl geçiş yapılacağı açıklanmaktadır.

SwipeableState alanını AnchoredDraggableState alanına taşıma

Öncelikle durum bilgisi depolayıcınızdaki değişiklikleri belirleyin. AnchoredDraggableState devralınamaz ve ofset, başlatılmadan önce Float.NaN olarak gösterilir.

Durum bilgisi depolayıcınızı güncelleyin

AnchoredDraggableState, nihai bir sınıftır. Bu nedenle, bu sınıftan devralınamaz. Mevcut bileşeniniz SwipeableState öğesinden devralıyorsa durum bilgisi depolayıcınızı AnchoredDraggableState öğesinden devralmak yerine AnchoredDraggableState öğesine referans tutacak şekilde güncelleyin:

class MySwitchState: SwipeableState()

class MySwitchState {
    private val anchoredDraggableState = AnchoredDraggableState(...)
}

Durum bilgisi depolayıcınız artık SwipeableState öğesinden devralmadığı için API'leri kendiniz kullanıma sunmanız gerekebilir. Kullanabileceğiniz en yaygın API'ler offset, progress, currentValue ve targetValue'dir.

Ofsete erişme

Swipeable'dan farklı olarak, AnchoredDraggableState'nin offset özelliği başlatılmadan önce Float.NaN olur. AnchoredDraggable içinde, bağlantılar AnchoredDraggableState'nin oluşturucusuna iletilebilir veya AnchoredDraggableState#updateAnchors aracılığıyla güncellenebilir. Çapaları AnchoredDraggableState oluşturucusuna iletmek, uzaklığı hemen başlatır.

Sabitleriniz düzene bağlıysa veya değişebilirse sabitler değiştiğinde durumu yeniden oluşturmamak için AnchoredDraggableState#updateAnchors kullanın.

updateAnchors kullanıyorsanız bağlantılar updateAnchors'ya aktarılmadan önce uzaklık Float.NaN olur. Float.NaN değerinin bileşenlere yanlışlıkla aktarılmasını önlemek için AnchoredDraggableState#requireOffset kullanarak okunurken ofsetin başlatılmasını zorunlu kılın. Bu sayede tutarsızlıkları veya olası hataları erken aşamada yakalayabilirsiniz.

@Composable
fun AnchoredDraggableBox() {
    val state = remember { AnchoredDraggableState(...) }
    val density = LocalDensity.current
    val anchors = remember { DraggableAnchors { ... } }
    SideEffect {
        state.updateAnchors(anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    }
}

Modifier.swipeable alanını Modifier.anchoredDraggable alanına taşıma

Modifier.anchoredDraggable(), Modifier.swipeable ile değiştirildi. Modifier.swipeable() parametrelerinden bazıları, aşağıdaki bölümlerde açıklandığı gibi doğrudan AnchoredDraggableState'ye taşındı.

Sabit reklamları tanımlama

DraggableAnchors oluşturucu yöntemini kullanarak bağlantıları tanımlayın. Ardından bunları AnchoredDraggableState#updateAnchors veya AnchoredDraggableState'nin oluşturucusuna geçirin:

enum class DragValue { Start, Center, End }

@Composable
fun AnchoredDraggableBox() {
    val anchors = DraggableAnchors {
        Start at -100.dp.toPx()
        Center at 0f
        End at 100.dp.toPx()
    }
    val state = remember {
        AnchoredDraggableState(anchors = anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    )
}

enum class DragValue { Start, Center, End }

@Composable
fun AnchoredDraggableBox() {
    val state = remember { AnchoredDraggableState(...) }
    val density = LocalDensity.current
    val anchors = with (density) {
        DraggableAnchors {
            Start at -100.dp.toPx()
            Center at 0f
            End at 100.dp.toPx()
        }
    }
    SideEffect {
        state.updateAnchors(anchors)
    }
    Box(
        Modifier.offset { IntOffset(x = state.requireOffset(), y = 0) }
    )
}

Sabit olan bağlantıları oluşturucuya iletin. Düzenle ilgiliyse veya statik değilse updateAnchors kullanın.

Konum eşiklerini tanımlama

Eşikler parametresinin türü ve adı değişti. Ayrı bir ThresholdConfig arayüzü yerine AnchoredDraggableState işlevinde, eşiğin konumunu döndüren bir lambda işlevi alan positionalThreshold parametresi bulunur. Örneğin, %50'lik bir konumsal eşik şu şekilde ifade edilebilir:

val anchoredDraggableState = AnchoredDraggableState(
    positionalThreshold = { distance -> distance * 0.5f },
    ...
)

56dp konum eşiği şu şekilde ifade edilebilir:

val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
    positionalThreshold = { with(density) { 56.dp.toPx() } },
    ...
)

Hız eşiklerini tanımlama

Hız eşikleri, AnchoredDraggableState oluşturucusuna da iletilir ve lambda olarak da ifade edilir:

val density = LocalDensity.current
val anchoredDraggableState = AnchoredDraggableState(
    velocityThreshold = { with(density) { 125.dp.toPx() } },
    ...
)

API yüzeyinde yapılan değişiklikler

API yüzeyindeki değişikliklerin özetini aşağıda bulabilirsiniz.

AnchoredDraggableState

Modifier.anchoredDraggable