如何检测具有垂直滚动的列的向上/向下滚动？

Question

我有一个列有很多项目；基于滚动，我想显示/隐藏浮动操作按钮，如果滚动向下，隐藏它，如果滚动向上，显示它。

我的代码部分工作，但滚动有问题。下面是代码。需要帮忙。

 Column(
      Modifier
        .background(color = colorResource(id = R.color.background_color))
        .fillMaxWidth(1f)
        .verticalScroll(scrollState)
        .scrollable(
          orientation = Orientation.Vertical,
          state = rememberScrollableState {
            offset.value = it

              coroutineScope.launch {
                scrollState.scrollBy(-it)
              }

            it
          },
        )
    ) { // 10-20 items }

根据偏移值（无论是正/负），我保持 FAB 的可见性。

Answer 1

您可以使用nestedScroll修饰符。

就像是：

val fabHeight = 72.dp //FabSize+Padding
val fabHeightPx = with(LocalDensity.current) { fabHeight.roundToPx().toFloat() }
val fabOffsetHeightPx = remember { mutableStateOf(0f) }

val nestedScrollConnection = remember {
    object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {

            val delta = available.y
            val newOffset = fabOffsetHeightPx.value + delta
            fabOffsetHeightPx.value = newOffset.coerceIn(-fabHeightPx, 0f)

            return Offset.Zero
        }
    }
}

由于可组合支持嵌套滚动，因此只需将其应用于Scaffold：

Scaffold(
        Modifier.nestedScroll(nestedScrollConnection),
        scaffoldState = scaffoldState,
        //..

        floatingActionButton = {
            FloatingActionButton(
                modifier = Modifier
                    .offset { IntOffset(x = 0, y = -fabOffsetHeightPx.value.roundToInt()) },
                onClick = {}
            ) {
                Icon(Icons.Filled.Add,"")
            }
        },
        content = { innerPadding ->
            Column(
                Modifier
                    .fillMaxWidth(1f)
                    .verticalScroll(rememberScrollState())
            ) {
                //....your code
            }
        }
 )

它可以与 aColumn一起使用verticalScroll，也可以与 a一起使用LazyColumn。