如何在Jetpack Compose的LazyColumn中检测用户上下滚动

要实现向下滚动隐藏元素、向上滚动显示元素的功能，有两种常用方案，以下是具体实现：

方案一：手动监听LazyListState判断滚动方向 #

通过LazyListState跟踪滚动的索引和偏移量，对比前后状态判断滚动方向，进而控制元素的显示隐藏。

完整代码示例 #

@Composable
fun ScrollHideDemo() {
    val lazyListState = rememberLazyListState()
    var isElementVisible by remember { mutableStateOf(true) }
    // 记录上一次的滚动偏移和可见项索引
    var lastScrollOffset by remember { mutableStateOf(0) }
    var lastVisibleIndex by remember { mutableStateOf(0) }

    // 监听滚动状态变化
    LaunchedEffect(lazyListState) {
        snapshotFlow {
            Pair(lazyListState.firstVisibleItemIndex, lazyListState.firstVisibleItemScrollOffset)
        }.collect { (currentIndex, currentOffset) ->
            when {
                // 切换了可见项，重置偏移记录
                currentIndex != lastVisibleIndex -> {
                    lastScrollOffset = currentOffset
                    lastVisibleIndex = currentIndex
                }
                // 向下滚动：当前偏移大于上次偏移
                currentOffset > lastScrollOffset -> {
                    isElementVisible = false
                }
                // 向上滚动：当前偏移小于上次偏移
                currentOffset < lastScrollOffset -> {
                    isElementVisible = true
                }
            }
            lastScrollOffset = currentOffset
        }
    }

    Column(modifier = Modifier.fillMaxSize()) {
        // 要显示/隐藏的元素，用AnimatedVisibility添加过渡动画
        AnimatedVisibility(
            visible = isElementVisible,
            enter = fadeIn() + slideInVertically(),
            exit = fadeOut() + slideOutVertically()
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(56.dp)
                    .background(Color.Blue),
                contentAlignment = Alignment.Center
            ) {
                Text(text = "滚动时会隐藏/显示", color = Color.White)
            }
        }

        LazyColumn(state = lazyListState) {
            items(100) { index ->
                Text(
                    text = "列表项 $index",
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    fontSize = 18.sp
                )
            }
        }
    }
}

方案二：使用官方TopAppBarScrollBehavior（推荐） #

如果你的目标元素是TopAppBar，官方提供了TopAppBarScrollBehavior，结合nestedScroll修饰符可以自动处理滚动时的显示隐藏，自带平滑动画，无需手动判断方向。

完整代码示例 #

@Composable
fun ScrollHideTopAppBarDemo() {
    val scrollBehavior = rememberTopAppBarScrollBehavior()

    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text("官方滚动隐藏示例") },
                scrollBehavior = scrollBehavior
            )
        }
    ) { paddingValues ->
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .nestedScroll(scrollBehavior.nestedScrollConnection),
            contentPadding = paddingValues
        ) {
            items(100) { index ->
                Text(
                    text = "列表项 $index",
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(16.dp),
                    fontSize = 18.sp
                )
            }
        }
    }
}

注意事项 #

• 方案一中，必须处理可见项索引变化的情况，否则当滚动到新的列表项时，偏移量的对比会出现错误判断。
• 方案二仅适用于TopAppBar，若要自定义其他元素的显示隐藏，方案一更灵活。
• 使用AnimatedVisibility可以给元素的显示/隐藏添加过渡动画，提升用户体验。

内容的提问来源于stack exchange，提问作者androiddev321