draggable
değiştiricisi, hareketleri tek bir yönde sürüklemek için kullanılan ü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
işlevine benzer olduğunu unutmayın. Durumu muhafaza etmeniz ve ekranda temsil etmeniz gerekir. Örneğin, öğeyi offset
değiştiricisi aracılığıyla hareket ettirerek:
@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 hareketini tamamen kontrol etmeniz gerekiyorsa bunun yerine pointerInput
değiştiricisi aracılığıyla sürükleme hareketi algılayıcıyı 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
swipeable
değiştiricisi, serbest bırakıldıklarında genellikle bir yönde tanımlanmış iki veya daha fazla sabitleme noktasına doğru canlandırılan öğeleri sürüklemenizi sağlar. Bunun yaygın bir kullanım şekli, "kapatmak için hızlıca kaydırma" kalıbıdır.
Bu değiştiricinin öğeyi hareket ettirmediğini, yalnızca hareketi algıladığını unutmayın. Durumu muhafaza etmeniz ve ekranda temsil etmeniz gerekir. Örneğin, öğeyi offset
değiştiricisi aracılığıyla hareket ettirebilirsiniz.
Kaydırılabilir durum, swipeable
değiştiricisinde zorunludur ve rememberSwipeableState()
ile oluşturulup hatırlanabilir.
Bu durum, çapaların programlı bir şekilde canlandırılması için bir dizi faydalı yöntem (bkz. snapTo
, animateTo
, performFling
ve performDrag
) ve sürüklemenin ilerleme durumunu gözlemlemek için gereken özellikler sağlar.
Kaydırma hareketi, FixedThreshold(Dp)
ve FractionalThreshold(Float)
gibi farklı eşik türlerine sahip olacak şekilde yapılandırılabilir ve her sabitleme noktası kombinasyonu için farklı olabilir.
Daha fazla esneklik için sınırları kaydırırken resistance
öğesini ve konumlandırma thresholds
değerine ulaşılmamış olsa bile sonraki duruma kaydırma animasyonu yapacak velocityThreshold
öğesini 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: Bağlantı metni JavaScript kapalıyken görüntülenir
- Hareketleri anlama
- Gelişmiş animasyon örneği: Hareketler {:#gesture-and-animation}
- Değere dayalı animasyonlar