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

Swipeable, dünyanın dört bir yanından kullanıcılara Kaydırarak ayrı durumlar arasında (ör. alt sayfalar, çekmeceler veya kapatmak için hızlıca kaydır. Veriye dayalı reklamlar gibi gelişmiş kullanım alanlarını bir bileşenin boyutuna bağlı olduğu için bir bileşen Compose-Temel 1.6.0-alpha01: AnchoredDraggable. AnchoredDraggable. sabit durumlara sahip sürüklenebilir bileşenler oluşturmaya yönelik bir Temel API'dir. çekmeceleri kullanabilir veya hızlıca kaydırarak kapatabilirsiniz.

Material'ın Swipeable API'leri kullanımdan kaldırıldı. AnchoredDraggable ve daha sonraki bir sürümde kaldırılacaktır. Bu kılavuz Swipeable API'lerinden AnchoredDraggable ortamına nasıl geçiş yapılacağını açıklar.

SwipeableState alanını AnchoredDraggableState kuruluşuna taşıyın

Eyalet sahibinizdeki değişiklikleri tanımlayarak başlayın. AnchoredDraggableState. devralınamaz ve ofset, kendisinden önce Float.NaN olarak gösterilir başlatıldı.

Eyalet sahibinizi güncelleyin

AnchoredDraggableState nihai bir sınıf olduğu için devralınamaz var. Mevcut bileşeniniz SwipeableState ürününden devralıyorsa şunu güncelleyin: bir referans olarak değil de AnchoredDraggableState için bir referansta bulunmasını devralan:

class MySwitchState: SwipeableState()

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

Eyalet sahibiniz artık SwipeableState adlı kuruluştan devralmadığı için API'leri sizin vermeniz gerekebilir. Kullanabileceğiniz en yaygın API'ler offset, progress, currentValue ve targetValue.

Ofsete erişme

Swipeable uygulamasından farklı olarak, AnchoredDraggableState adlı kullanıcının offset değeri Float.NaN öncesinde başlatıldı. AnchoredDraggable ürününde çapalar AnchoredDraggableState oluşturucusu veya güncellemesi: AnchoredDraggableState#updateAnchors. Çapaları AnchoredDraggableState öğesinin oluşturucusu, ofseti hemen başlatır.

Bağlayıcılarınız düzene bağlıysa veya değişebilirse aşağıdaki durumlarda durumun yeniden oluşturulmasını önlemek için AnchoredDraggableState#updateAnchors çapa değişimi.

updateAnchors kullanırsanız, ofset değeri Float.NaN updateAnchors sabitler. Float.NaN öğesini yanlışlıkla bileşeninin yerine, AnchoredDraggableState#requireOffset okunduğunda ofset başlatıldı. Bu sayede tutarsızlıkları veya olası hataları erkenden saptayın.

@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 kuruluşuna taşıyın

Modifier.anchoredDraggable(), Modifier.swipeable'in yerini almıştır. Biraz Modifier.swipeable() parametresinden AnchoredDraggableState parametresine taşındı (aşağıdaki bölümlerde açıklandığı gibi) doğrudan eklemeniz gerekir.

Bağlayıcıları tanımlama

DraggableAnchors oluşturucu yöntemini kullanarak sabitleri tanımlayın. Ardından, AnchoredDraggableState#updateAnchors veya AnchoredDraggableState oluşturucu:

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) }
    )
}

Çapalar statikse bunları oluşturucuya iletin. Projenin hedefleri ya da statik değilse updateAnchors kullanın.

Konumsal eşikleri tanımlama

Eşikler parametresinin türü ve adı değişti. Bunun yerine ayrı ThresholdConfig arayüzü, AnchoredDraggableState Şu değeri döndüren lambda işlevini alan positionalThreshold parametresi eşik konumuna getirilmelidir. Örneğin, %50'lik bir konum eşiği şu şekilde ifade edilir:

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 öğesinin oluşturucusuna da iletilir. ve ayrıca lambda olarak ifade edilir:

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

API yüzeyindeki değişiklikler

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

AnchoredDraggableState

Modifier.anchoredDraggable