Swipeable
, alt sayfalar, çekmeceler veya hızlıca kaydırarak kapatmak için farklı durumlar arasında kaydırılabilen bileşenler oluşturmanıza yardımcı olan bir Compose Material API'sidir. Bileşenin boyutuna bağlı olan sabitler gibi ileri düzey kullanım alanlarını daha iyi desteklemek için Composer-Foundation 1.6.0-alpha01: AnchoredDraggable
sürümünde bir halef yayınlandı. AnchoredDraggable
, alt sayfalar, çekmeceler veya hızlıca kaydırarak kapatma gibi sabit durumlarda sürüklenebilir bileşenler oluşturmaya yönelik bir Temel API'dir.
Materyalin Swipeable
API'leri kullanımdan kaldırılmıştır ve yerine Foundation'ın AnchoredDraggable
API'si getirilmektedir ve gelecekteki bir sürümde kaldırılacaktır. Bu kılavuzda, Swipeable
API'lerinden AnchoredDraggable
'a nasıl geçiş yapılacağı açıklanmaktadır.
SwipeableState
cihazını AnchoredDraggableState
hedefine taşıyın
Eyalet sahibinizdeki değişiklikleri tanımlayarak başlayın. AnchoredDraggableState
şuradan devralınamaz ve ofset, başlatılmadan önce Float.NaN
olarak temsil edilir.
Eyalet sahibinizi güncelleme
AnchoredDraggableState
bir nihai sınıftır. Diğer bir deyişle, bu sınıftan devralınamaz. Mevcut bileşeniniz SwipeableState
öğesini devralıyorsa durum sahibinizi, öğeden devralmak yerine AnchoredDraggableState
öğesine bir referans içerecek şekilde güncelleyin:
Kaydırılabilir
class MySwitchState: SwipeableState()
Sabit Sürüklenebilir
class MySwitchState {
private val anchoredDraggableState = AnchoredDraggableState(...)
}
Durum sahibiniz artık SwipeableState
öğelerini devralmadığından API'leri kendiniz kullanıma sunmanız gerekebilir. En yaygın olarak offset
, progress
, currentValue
ve targetValue
API'lerini kullanabilirsiniz.
Ofset erişimi
Swipeable
uygulamasının aksine AnchoredDraggableState
offset
özelliği başlatılmadan önce Float.NaN
değerindedir. AnchoredDraggable
ürününde çapalar AnchoredDraggableState
oluşturucuya iletilebilir veya AnchoredDraggableState#updateAnchors
aracılığıyla güncellenebilir. Çapaların AnchoredDraggableState
oluşturucusuna geçirilmesi, ofseti hemen başlatır.
Anchor'larınız düzene bağlıysa veya değişebilecekse çapalar değiştiğinde durumu yeniden oluşturmaktan kaçınmak için AnchoredDraggableState#updateAnchors
kullanın.
updateAnchors
kullanırsanız çapalar updateAnchors
öğesine geçirilmeden önce göreli konum Float.NaN
olur. Float.NaN
değerini yanlışlıkla bileşenlere geçirmeyi önlemek için AnchoredDraggableState#requireOffset
kullanarak ofsetin okuma sırasında başlatılmasını zorunlu kılın. Bu, tutarsızlıkları veya olası hataları
önceden fark etmenize yardımcı olur.
@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
cihazını Modifier.anchoredDraggable
hedefine taşıyın
Modifier.anchoredDraggable()
, Modifier.swipeable
yerine geçer. Bazı Modifier.swipeable()
parametreleri, aşağıdaki bölümlerde açıklandığı gibi doğrudan AnchoredDraggableState
konumuna taşındı.
Anchor'ları tanımlama
Anchor'ları DraggableAnchors
oluşturucu yöntemini kullanarak tanımlayın. Ardından, bunları AnchoredDraggableState#updateAnchors
veya AnchoredDraggableState
oluşturucuya iletin:
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) }
)
}
UpdateAnchors
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) }
)
}
Anchor'lar statikse bunları oluşturucuya iletin. Bunlar düzene bağlıysa veya statik değilse updateAnchors
kullanın.
Konumlandırma eşiklerini tanımlama
Eşikler parametresinin türü ve adı değişti. AnchoredDraggableState
, ayrı bir ThresholdConfig
arayüzüne sahip olmak yerine, eşiğin konumunu döndüren lambda işlevini alan bir positionalThreshold
parametresine sahiptir. Örneğin, %50'lik bir konum eşiği şu şekilde ifade edilebilir:
val anchoredDraggableState = AnchoredDraggableState(
positionalThreshold = { distance -> distance * 0.5f },
...
)
56dp
'lık bir 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 de AnchoredDraggableState
oluşturucuya 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üzeyinde yapılan değişikliklerle ilgili genel bir bakış bulabilirsiniz.
AnchoredDraggableState
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
Yok |
|
|
|
|
|
|
|
|
|
|
|
Modifier.anchoredDraggable
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Henüz desteklenmiyor. En son durum için b/288084801 adresini ziyaret edin. |
|
|