如何检测具有垂直滚动的列的 up/down 滚动？

Question

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

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

 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 }

根据偏移值（是否positive/negative），我保持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
            }
        }
 )

它可以与 Column 和 verticalScroll 一起使用，也可以与 LazyColumn.

一起使用