我需要使用 swipe 来显示和 swipe 与 jetpack compose android 一起关闭答案

【问题标题】：I need to use swipe to reveal and swipe to dismiss together with jetpack compose android我需要使用 swipe 来显示和 swipe 与 jetpack compose android 一起关闭
【发布时间】：2022-11-10 19:04:43
【问题描述】：

我需要在向右滑动时使用滑动来显示，并在使用 jetpack compose android 向左滑动时使用滑动来关闭我该如何实现？

【问题讨论】：

查看this answer。
给我这个错误可组合调用只能在 @Composable 函数的上下文中发生
究竟是哪个代码给了你这样的错误？我已经处理了答案中的最后一个代码块，它按预期工作。将您尝试过的代码添加到此问题
为什么不通过观察“x 中的变化”来实现默认的 swipe 方法来关闭和修改它呢？阅读here
我正在使用 swipeToDismiss 和 swipeToReveal 我需要的是根据方向将同一项目上的两个动作结合起来，你明白我的问题吗？

标签： android android-jetpack-compose

【解决方案1】：

你可以修改这个。自己尝试一下，或者我也可以在一段时间内提供帮助，但这应该很容易。试试看。

fun Modifier.swipeToDismiss(
    onDismissed: () -> Unit
): Modifier = composed {
    val offsetX = remember { Animatable(0f) }
    pointerInput(Unit) {
        // Used to calculate fling decay.
        val decay = splineBasedDecay<Float>(this)
        // Use suspend functions for touch events and the Animatable.
        coroutineScope {
            while (true) {
                // Detect a touch down event.
                val pointerId = awaitPointerEventScope { awaitFirstDown().id }
                val velocityTracker = VelocityTracker()
                // Stop any ongoing animation.
                offsetX.stop()
                awaitPointerEventScope {
                    horizontalDrag(pointerId) { change ->
                        // Update the animation value with touch events.
                        launch {
                            offsetX.snapTo(
                                offsetX.value + change.positionChange().x
                            )
                        }
                        velocityTracker.addPosition(
                            change.uptimeMillis,
                            change.position
                        )
                    }
                }
                // No longer receiving touch events. Prepare the animation.
                val velocity = velocityTracker.calculateVelocity().x
                val targetOffsetX = decay.calculateTargetValue(
                    offsetX.value,
                    velocity
                )
                // The animation stops when it reaches the bounds.
                offsetX.updateBounds(
                    lowerBound = -size.width.toFloat(),
                    upperBound = size.width.toFloat()
                )
                launch {
                    if (targetOffsetX.absoluteValue <= size.width) {
                        // Not enough velocity; Slide back.
                        offsetX.animateTo(
                            targetValue = 0f,
                            initialVelocity = velocity
                        )
                    } else {
                        // The element was swiped away.
                        offsetX.animateDecay(velocity, decay)
                        onDismissed()
                    }
                }
            }
        }
    }
        .offset { IntOffset(offsetX.value.roundToInt(), 0) }
}

【讨论】：

我对整个撰写内容真的很陌生，而且我不知道如何使用您提供的这段代码

【解决方案2】：

我已经通过使用这个库依赖解决了这样一个问题

de.charlex.compose:revealswipe:1.0.0

见here

【讨论】：

它并没有解决问题，首先我仍然不能在同一张卡上拥有两种类型的解雇，其次它将您可以显示的选项限制为一个图标

【解决方案3】：

检查此实现here，无需其他库。

https://proandroiddev.com/swipe-to-reveal-in-jetpack-compose-6ffa8928a4c2

@Composable
fun DraggableCardComplex(
    card: CardModel,
    isRevealed: Boolean,
    cardOffset: Float,
    onExpand: () -> Unit,
    onCollapse: () -> Unit,
) {
    val offsetX by remember { mutableStateOf(0f) }
    val transitionState = remember {
        MutableTransitionState(isRevealed).apply {
            targetState = !isRevealed
        }
    }
    val transition = updateTransition(transitionState)
    val offsetTransition by transition.animateFloat(
        label = "cardOffsetTransition",
        transitionSpec = { tween(durationMillis = ANIMATION_DURATION) },
        targetValueByState = { if (isRevealed) cardOffset - offsetX else -offsetX },
    )
    
    Card(
        modifier = Modifier
            .offset { IntOffset((offsetX + offsetTransition).roundToInt(), 0) }
            .pointerInput(Unit) {
                detectHorizontalDragGestures { change, dragAmount ->
                   ..
                }
            },
        content = { CardTitle(cardTitle = card.title) }
    )
}

【讨论】：