如何为Jetpack Compose中LazyColumn的stickyHeader设置顶部100px偏移粘滞？

要实现这个需求，核心思路是通过监听LazyColumn的滚动状态，动态调整stickyHeader的偏移量：只有当header滚动到距离顶部100px的位置时，才让它固定在该位置，在此之前保持正常滚动无偏移。

步骤1：定义核心参数 #

先定义顶部偏移量，并转换为像素单位（Compose布局计算常用像素）：

val density = LocalDensity.current
val stickyOffsetPx = with(density) { 100.dp.toPx() } // 目标固定位置：距离顶部100dp
val listState = rememberLazyListState() // 监听列表滚动状态

步骤2：封装自定义偏移Modifier #

为了复用逻辑，把偏移计算封装成一个自定义Modifier：

fun Modifier.stickyHeaderOffset(
    listState: LazyListState,
    fixedTopPx: Float
): Modifier = composed {
    val headerCoords = remember { mutableStateOf<LayoutCoordinates?>(null) }

    this
        .onGloballyPositioned { coords ->
            headerCoords.value = coords // 记录header的布局坐标
        }
        .offset {
            headerCoords.value?.let { coords ->
                val scrollOffset = listState.firstVisibleItemScrollOffset.toFloat()
                // 计算header在列表中的原始顶部位置（减去滚动偏移后的实际位置）
                val headerOriginalTop = coords.localToRoot(Offset.Zero).y - scrollOffset
                // 当header原始位置低于固定位置时，计算偏移量让它固定在目标位置
                val offsetY = if (headerOriginalTop < fixedTopPx) {
                    fixedTopPx - headerOriginalTop
                } else {
                    0f // 未到达目标位置时无偏移
                }
                IntOffset(0, offsetY.toInt())
            } ?: IntOffset.Zero
        }
}

步骤3：在LazyColumn中使用 #

直接在stickyHeader组件上应用这个自定义Modifier即可：

LazyColumn(state = listState, modifier = Modifier.fillMaxSize()) {
    // 第一个粘性头部
    stickyHeader {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.LightGray)
                .stickyHeaderOffset(listState, stickyOffsetPx)
        ) {
            Text(
                text = "Sticky Header 1",
                modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold
            )
        }
    }

    // 列表项
    items(20) { index ->
        Text(
            text = "List Item ${index + 1}",
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 16.dp),
            fontSize = 16.sp
        )
    }

    // 第二个粘性头部
    stickyHeader {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Color.LightGray)
                .stickyHeaderOffset(listState, stickyOffsetPx)
        ) {
            Text(
                text = "Sticky Header 2",
                modifier = Modifier.padding(horizontal = 16.dp, vertical = 12.dp),
                fontSize = 18.sp,
                fontWeight = FontWeight.Bold
            )
        }
    }

    // 更多列表项
    items(20) { index ->
        Text(
            text = "List Item ${21 + index}",
            modifier = Modifier
                .fillMaxWidth()
                .padding(horizontal = 16.dp, vertical = 16.dp),
            fontSize = 16.sp
        )
    }
}

逻辑说明 #

1. 布局坐标监听：通过onGloballyPositioned获取stickyHeader的全局坐标，用于计算它在屏幕中的位置。
2. 滚动状态联动：结合LazyListState的滚动偏移量，计算header在列表中的实际位置。
3. 偏移量计算：只有当header的原始位置（减去滚动偏移）低于100px时，才添加顶部偏移，让它固定在目标位置；未到达时偏移量为0，保持正常滚动。

这个方案完全满足需求：header在到达距离顶部100px之前正常滚动，到达后固定在该位置，且支持多个stickyHeader的场景。

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