如何获取Jetpack Compose中LazyColumn的滚动百分比？

要计算LazyColumn的滚动百分比，核心是获取当前滚动偏移量和总可滚动范围，通过公式 (当前滚动偏移 / 总可滚动范围) * 100% 得到结果。以下是具体实现方案：

实现步骤 #

1. 初始化LazyListState：用这个状态类跟踪LazyColumn的滚动状态
2. 监听滚动状态变化：通过snapshotFlow收集滚动事件，实时计算百分比
3. 计算关键参数：
   • 总可滚动范围：所有内容总高度减去LazyColumn可视区域高度
   • 当前滚动偏移：已滚动过的内容总高度（包括当前可见项已滚动的部分）

完整代码示例 #

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import kotlinx.coroutines.flow.filter

@Composable
fun ScrollPercentageLazyColumn() {
    val lazyListState = rememberLazyListState()
    var scrollPercentage by remember { mutableStateOf(0f) }

    // 监听滚动并计算百分比
    LaunchedEffect(lazyListState) {
        snapshotFlow { lazyListState.isScrollInProgress }
            .filter { it } // 仅在滚动中计算
            .collect {
                val layoutInfo = lazyListState.layoutInfo
                val totalContentHeight = layoutInfo.totalContentHeight
                val viewportHeight = layoutInfo.viewportSize.height
                val totalScrollableHeight = totalContentHeight - viewportHeight

                if (totalScrollableHeight <= 0) {
                    scrollPercentage = 0f
                    return@collect
                }

                // 计算当前已滚动的总高度
                val scrolledHeight = lazyListState.firstVisibleItemScrollOffset +
                        layoutInfo.visibleItemsInfo
                            .take(lazyListState.firstVisibleItemIndex)
                            .sumOf { it.size }

                scrollPercentage = (scrolledHeight.toFloat() / totalScrollableHeight) * 100
            }
    }

    LazyColumn(
        state = lazyListState,
        modifier = androidx.compose.foundation.layout.fillMaxSize()
    ) {
        items(100) { index ->
            Text(text = "Item $index - 滚动百分比: %.1f%%".format(scrollPercentage))
        }
    }
}

关键细节说明 #

• 当内容高度小于等于可视区域高度时，总可滚动范围为0，此时百分比固定为0%
• firstVisibleItemScrollOffset 是当前第一个可见项已滚动出可视区域顶部的高度
• visibleItemsInfo.take(firstVisibleItemIndex) 用来累加当前可见项之前所有项的总高度，得到已滚动的完整高度
• 用isScrollInProgress过滤滚动事件，避免不必要的计算

内容的提问来源于stack exchange，提问作者Asharali V U