如何检测 LazyColumn 中的滚动行为？

Question

我正在尝试检测三种情况：

1.- 用户垂直（向下）滚动并通知隐藏按钮

2.- 用户停止滚动并通知隐藏按钮

3.- 用户垂直（向上）滚动并通知显示按钮

4.- 用户位于列表底部，没有更多项目并通知显示按钮。

我尝试过的是：

第一种方法是使用nestedScrollConnection，如下所示

val isVisible = remember { MutableTransitionState(false) }
                .apply { targetState = true }
val nestedScrollConnection = remember {
                object : NestedScrollConnection {
                    override fun onPreScroll(
                        available: Offset,
                        source: NestedScrollSource
                    ): Offset {
                        return Offset.Zero
                    }

                    override fun onPostScroll(
                        consumed: Offset,
                        available: Offset,
                        source: NestedScrollSource
                    ): Offset {
                        isVisible.targetState = false
                        return super.onPostScroll(consumed, available, source)
                    }
                }
            }
LazyColumn(
                modifier = Modifier
                    .padding(start = 16.dp, end = 16.dp, top = 16.dp)
                    .nestedScroll(nestedScrollConnection),
                verticalArrangement = Arrangement.spacedBy(16.dp),
            )

。 0 正在上升，否则正在下降，但其他我不知道如何获得它们。

我遵循的另一种方法是：

val scrollState = rememberLazyListState()
LazyColumn(
                modifier = Modifier
                    .padding(start = 16.dp, end = 16.dp, top = 16.dp),
                verticalArrangement = Arrangement.spacedBy(16.dp),
                state = scrollState,

但我不知道如何获取它是否是最后一项，我可以获取滚动是否正在进行。

注意

Skizo 的答案是有效的，但是这有点奇怪，因为如果你慢慢向上滚动，Y 有时不是我想要的，然后再次隐藏它，有没有办法留下一些滚动来开始对此做出反应？例如，滚动 X 像素即可开始显示/隐藏。

我想要的是隐藏/显示一个浮动操作按钮，具体取决于滚动（场景是上面的场景）

我找到了这种方式，但它使用了偏移量，我想为 制作动画FloatActionButton 而不是像淡入/淡出那样从底部出现，我使用的是 动画可见性 我得到了这个工作淡入/淡出，但现在，我如何调整 github 上的代码以使用动画可见性？并且当用户结束滚动时添加此内容，从现在开始在代码中只是在滚动时

Answer 1

以下是实现这些目标的方法：

1.) 检测滚动方向（垂直向上或垂直向下）

@Composable
private fun LazyListState.isScrollingUp(): Boolean {
    var previousIndex by remember(this) { mutableStateOf(firstVisibleItemIndex) }
    var previousScrollOffset by remember(this) { mutableStateOf(firstVisibleItemScrollOffset) }
    return remember(this) {
        derivedStateOf {
            if (previousIndex != firstVisibleItemIndex) {
                previousIndex > firstVisibleItemIndex
            } else {
                previousScrollOffset >= firstVisibleItemScrollOffset
            }.also {
                previousIndex = firstVisibleItemIndex
                previousScrollOffset = firstVisibleItemScrollOffset
            }
        }
    }.value
}

现在，只需创建一个 listState 变量并将其与此可组合项一起使用即可检索滚动方向。

val listState = rememberLazyListState()
val scrollingUp = listState.isScrollingUp()

然后，正如您所说，您希望在用户停止滚动时收到通知，因此您只需创建一个名为 restingScrollPosition 的变量，我将其命名为 rsp简称。现在您已经熟悉了所需的帮助器方法，所需要做的就是设计一种机制来根据当前滚动位置的值触发事件，如果特定数量的值相同，则触发相关代码时间（卷轴的定义是“静止”）。

所以，

var rsp by remember { mutableStateOf(listState.firstVisibleItemScrollOffset) } 
var isScrolling by remember { mutableStateOf(false) } // to keep track of the scroll-state

LaunchedEffect(key = listState.firstVisibleItemScrollOffset){ //Recomposes every time the key changes

/*This block will also be executed
 on the start of the program,
 so you might want to handle
 that with the help of another variable.*/
 
 isScrolling = true // If control reaches here, we're scrolling
 launch{
  isScrolling = false
  delay(100) //If there's no scroll after a hundred seconds, update rsp
  if(!isScrolling){
     rsp = listState.firstVisibleItemScrollOffset
     /* Execute your trigger here,
        this denotes the scrolling has stopped */
    }
 }
}

我不认为我会在这里解释最后一段代码的工作原理，请自己分析以获得更好的理解，这并不难。

啊，是的，要实现最后一个目标，您只需对 API 使用一点虚张声势，特别是像 lazyListState.layoutInfo 这样的方法。它包含您需要的有关屏幕上当前可见项目的所有信息，因此您还可以使用它来实现您的微妙需求，即您希望在触发代码块之前允许滚动一定量。只需查看对象中的可用信息，您就应该能够启动它。

更新：

根据昨天添加的评论中提供的信息，这应该是实现，

您在层次结构中的某个位置有一个 FAB，并且您希望根据动画它的可见性>isScrollingUp，它绑定到层次结构中其他地方定义的Lazy Scroller，

在这种情况下，你可以看一下状态提升，这是声明式编程的一般最佳实践。

只需将 isScrollingUp() 输出提升到声明 FAB 的位置即可，或者如果您需要根据您的用例进行特定说明，请分享完整的代码。我需要整个家族能够帮助你解决这个问题。

Answer 2

几天前我也遇到了同样的问题，我按照你说的做了一些混合。

要显示或隐藏，然后使用 Y 向上或向下滚动就足够了。

val nestedScrollConnection = remember {
   object : NestedScrollConnection {
             override fun onPreScroll(
             available: Offset,
             source: NestedScrollSource
         ): Offset {
            val delta = available.y
            isVisible.targetState = delta > 0
            return Offset.Zero
        }
    }
}

并检测没有更多可以使用的物品

fun isLastItemVisible(lazyListState: LazyListState): Boolean {
 val lastItem = layoutInfo.visibleItemsInfo.lastOrNull()
 return lastItem == null || lastItem.size + lastItem.offset <= layoutInfo.viewportEndOffset
}

Answer 3

对于 1 和 3，如果您想在显示/隐藏某些内容之前指定特定的滚动距离，您可以创建一个具有自己状态的 NestedScrollConnection 。

这是一个可能会给您一些想法的实现示例。当达到 downThreshold 时，CustomScrollConnection.isScrollingDown 将返回 true，当达到 upThreshold 时，它将更改为 false已达到。

private class CustomScrollConnection(
    downThreshold: Dp = 0.dp,
    upThreshold: Dp = 0.dp,
    density: Density
) : NestedScrollConnection {

    var isScrollingDown by mutableStateOf(false)
        private set

    private val downThresholdPx = with(density) { -downThreshold.toPx() }
    private val upThresholdPx = with(density) { upThreshold.toPx() }
    private var isScrollingDownDelta = 0f

    override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
        val delta = available.y
        updateState(delta)
        return Offset.Zero
    }

    private fun updateState(delta: Float) {
        val isChangingDirections = isScrollingDownDelta.sign != delta.sign

        isScrollingDownDelta = if (isChangingDirections) {
            delta
        } else {
            isScrollingDownDelta + delta
        }.coerceIn(downThresholdPx, upThresholdPx)

        val isUpScroll = isScrollingDownDelta == upThresholdPx && delta > 0
        val isDownScroll = isScrollingDownDelta == downThresholdPx && delta < 0

        val continueDownScroll = isScrollingDown && !isUpScroll
        isScrollingDown = continueDownScroll || isDownScroll
    }
}

您可以在将实例传递给 nestedScroll 修饰符之前创建一个这样的实例。

val localDensity = LocalDensity.current

val customScrollConnection = remember(localDensity) {
    CustomScrollConnection(
        downThreshold = DOWN_SCROLL_THRESHOLD,
        upThreshold = UP_SCROLL_THRESHOLD,
        density = localDensity
    )
}

需要额外的代码才能将其与 rememberSaveable 一起使用。

对于 2，如果您使用的是 LazyListState，您可以查看 !lazyListState.isScrollInProgress 是否有帮助。

对于 4，您可以尝试使用 !lazyListState.canScrollForward。或者，在 NestedScrollConnection 的实现中，如果您重写 onPostScroll，则可以检查 consumed.y == 0f &&可用。 0f;这可能意味着您已触底。