Compose 中 Drag, swipe, and fling

在 Jetpack Compose 中，Drag、Swipe 和 Fling 是常见的手势操作，用于实现拖动、滑动和快速滚动的效果。Compose 提供了相应的手势检测和处理功能，使得开发者可以轻松地为应用程序添加这些交互功能。

Drag 手势

Drag 手势用于实现拖动操作，例如拖动视图、调整大小等。Compose 提供了 Modifier.draggable 修饰符来处理 Drag 手势。

以下是一个简单的示例代码，演示了如何在 Compose 中使用 Drag 手势：

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.dp

@Composable
fun DragGestureExample() {
    var offsetX by remember { mutableStateOf(0f) }
    var offsetY by remember { mutableStateOf(0f) }

    Box(
        modifier = Modifier
            .size(100.dp)
            .offset(x = offsetX.dp, y = offsetY.dp)
            .background(Color.Blue)
            .pointerInput(Unit) {
                detectDragGestures { change, dragAmount ->
                    offsetX += dragAmount.x
                    offsetY += dragAmount.y
                }
            }
    )
}

在上述示例中，我们创建了一个蓝色的正方形 Box，并使用 Modifier.draggable 修饰符来实现 Drag 手势。当用户在 Box 上拖动时，Box 的位置会随着拖动的距离而改变。

Swipe 手势

Swipe 手势用于实现滑动操作，例如左右滑动切换页面、上下滑动浏览内容等。Compose 提供了 Modifier.swipeable 修饰符来处理 Swipe 手势。

以下是一个简单的示例代码，演示了如何在 Compose 中使用 Swipe 手势：

import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.rememberSwipeable
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Composable
fun SwipeGestureExample() {
    var offset by remember { mutableStateOf(0f) }

    val swipeableState = rememberSwipeableState(0)

    Box(
        modifier = Modifier
            .fillMaxSize()
            .offset(x = offset.dp)
            .background(Color.Blue)
            .swipeable(
                state = swipeableState,
                anchors = mapOf(-200f to -200, 0f to 0, 200f to 200),
                orientation = Orientation.Horizontal
            )
    )
}

在上述示例中，我们创建了一个蓝色的矩形 Box，并使用 Modifier.swipeable 修饰符来实现 Swipe 手势。当用户水平滑动 Box 时，Box 的位置会随着滑动的距离而改变。

Fling 手势

Fling 手势用于实现快速滚动操作，例如快速滚动列表、快速滚动图片等。Compose 提供了 Modifier.draggable 修饰符来处理 Fling 手势。

以下是一个简单的示例代码，演示了如何在 Compose 中使用 Fling 手势：

import androidx.compose.foundation.gestures.detectDragGestures
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.unit.dp

@Composable
fun FlingGestureExample() {
    var offsetX by remember { mutableStateOf(0f) }

    Box(
        modifier = Modifier
            .size(100.dp)
            .offset(x = offsetX.dp)
            .background(Color.Blue)
            .pointerInput(Unit) {
                detectDragGestures { _, dragAmount ->
                    offsetX += dragAmount.x
                }
            }
    )
}

在上述示例中，我们创建了一个蓝色的正方形 Box，并使用 Modifier.draggable 修饰符来实现 Fling 手势。当用户迅速滑动 Box 时，Box 的位置会根据滑动的速度进行快速移动。

通过使用 Drag、Swipe 和 Fling 手势，你可以为应用程序添加各种交互功能，例如拖动、滑动、快速滚动等，从而提升用户体验。