draggable
değiştirici, tek bir yönde sürükleme hareketlerine yönelik üst düzey giriş noktasıdır ve sürükleme mesafesini piksel cinsinden bildirir.
Bu değiştiricinin, yalnızca hareketi algılaması açısından scrollable
ile benzer olduğunu belirtmek önemlidir. Durumu tutmanız ve örneğin öğeyi offset
değiştirici aracılığıyla hareket ettirerek ekranda göstermeniz gerekir:
@Composable private fun DraggableText() { var offsetX by remember { mutableStateOf(0f) } Text( modifier = Modifier .offset { IntOffset(offsetX.roundToInt(), 0) } .draggable( orientation = Orientation.Horizontal, state = rememberDraggableState { delta -> offsetX += delta } ), text = "Drag me!" ) }
Sürükleme hareketinin tamamını kontrol etmeniz gerekiyorsa sürükleme hareketini kullanmayı düşünün
algılamak için hareket dedektörünü
pointerInput
kullanabilirsiniz.
@Composable private fun DraggableTextLowLevel() { Box(modifier = Modifier.fillMaxSize()) { var offsetX by remember { mutableStateOf(0f) } var offsetY by remember { mutableStateOf(0f) } Box( Modifier .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) } .background(Color.Blue) .size(50.dp) .pointerInput(Unit) { detectDragGestures { change, dragAmount -> change.consume() offsetX += dragAmount.x offsetY += dragAmount.y } } ) } }
Kaydırma
İlgili içeriği oluşturmak için kullanılan
swipeable
değiştiricisi, serbest bırakıldıklarında normal öğelere giden öğeleri sürüklemenizi sağlar.
bir yönde tanımlanan iki veya daha fazla sabitleme noktası. Bunun için yaygın olarak kullanılan bir yöntem, "reddetmek için kaydır" kalıbını uygulamaktır.
Bu değiştiricinin öğeyi hareket ettirmediğini, yalnızca
hareketi algılar. Eyaleti basılı tutmanız ve ekranda ne zaman temsil etmeniz gerektiğini
örneğin, öğeyi
offset
kullanabilirsiniz.
Kaydırılabilir durum, swipeable
değiştiricide gereklidir ve rememberSwipeableState()
ile oluşturulup hatırlanabilir.
Bu durum, sabit noktalara (snapTo
, animateTo
, performFling
ve performDrag
'ye bakın) programlı olarak animasyon uygulamak için yararlı yöntemler ve sürükleme işleminin ilerleme durumunu gözlemlemek için özellikler de sağlar.
Kaydırma hareketi, FixedThreshold(Dp)
ve FractionalThreshold(Float)
gibi farklı eşik türlerine sahip olacak şekilde yapılandırılabilir. Bu eşik türleri, her bir başlangıç ve bitiş noktası kombinasyonu için farklı olabilir.
Daha fazla esneklik için, sınırların ötesine kaydırırken resistance
'ü ve ayrıca konumsal thresholds
'ye ulaşılmamış olsa bile bir kaydırmayı sonraki duruma animasyonlu olarak uygulayacak velocityThreshold
'ü yapılandırabilirsiniz.
@OptIn(ExperimentalMaterialApi::class) @Composable private fun SwipeableSample() { val width = 96.dp val squareSize = 48.dp val swipeableState = rememberSwipeableState(0) val sizePx = with(LocalDensity.current) { squareSize.toPx() } val anchors = mapOf(0f to 0, sizePx to 1) // Maps anchor points (in px) to states Box( modifier = Modifier .width(width) .swipeable( state = swipeableState, anchors = anchors, thresholds = { _, _ -> FractionalThreshold(0.3f) }, orientation = Orientation.Horizontal ) .background(Color.LightGray) ) { Box( Modifier .offset { IntOffset(swipeableState.offset.value.roundToInt(), 0) } .size(squareSize) .background(Color.DarkGray) ) } }
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Hareketleri anlama
- Gelişmiş animasyon örneği: Hareketler {:#gesture-and-animation}
- Değere dayalı animasyonlar