Jetpack Compose LazyColumn 项目滚动到 StickyHeader 上，但不会滚动到最后一项

Question

我正在努力使用 jetpack compose LazyColumn 和 StickyHeader 功能。基本上静态视图效果很好，但是一旦我开始滚动，这些项目就会越过粘性标题，滚动会开始一种奇怪的行为，并且最后一个项目将永远不可见，因为滚动总是反弹回来。

它看起来是这样的：

这是可组合的：

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun CollectionsScreen(
    collectionsLive: LiveData<List<CollectionsView>>,
    onCollectionChanged: (ICalCollection) -> Unit
    /* some more hoisted functions left out for simplicity */
) {

    val list by collectionsLive.observeAsState(emptyList())
    val grouped = list.groupBy { it.accountName ?: it.accountType ?: "Account" }

    LazyColumn(
        modifier = Modifier.padding(8.dp)
    ) {

        item {
            Text(
                stringResource(id = R.string.collections_info),
                textAlign = TextAlign.Center,
                modifier = Modifier.padding(bottom = 16.dp)
            )
        }

        grouped.forEach { (account, collectionsInAccount) ->
            stickyHeader {
                Text(
                    account,
                    style = MaterialTheme.typography.titleLarge,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(
                        top = 16.dp,
                        start = 8.dp,
                        end = 16.dp,
                        bottom = 8.dp
                    )
                )
            }

            items(
                items = collectionsInAccount,
                key = { collection -> collection.collectionId }
            ) { collection ->

                CollectionCard(
                    collection = collection,
                    allCollections = list,
                    onCollectionChanged = onCollectionChanged,
                    /* some more hoisted functions left out for simplicity */
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 8.dp)
                        .animateItemPlacement()
                        .combinedClickable(
                            //onClick = { onCollectionClicked(collection) }
                         )
                )
            }
        }
    }
}

我真的不确定是什么导致了这个问题，因为从文档中提供的示例来看，代码本身非常简单。只是CollectionCard本身的结构比较复杂。我还尝试删除标题文本（第一项）并删除卡片的 Modifier.animateItemPlacement() ，但没有区别，问题保持不变...可组合项本身用于片段内的撰写视图，但没有嵌套滚动。您知道什么可能导致这种奇怪的行为吗？或者，在 LazyColumn 中使用带有粘性标题的卡片时，这可能是一个错误吗？

更新：看起来这个问题与 StickyHeader 无关，但与 LazyColumn 无关。如果我用“item”替换“stickyHeader”，问题仍然存在......只有当我用列替换lazyColumn时它才会起作用。但我认为这个问题一定有解决方案......

Answer 1

一般来说，如果您使用的是 Material 或 Material3 主题，您可以将 StickyHeader 内容包装在 a 中，Surface以使用主题的标准（或自定义）着色方案自动使其不透明。Surface允许您将 StickyHeader 提升到表格其他内容之上。

stickyHeader {
    Surface(Modifier.fillParentMaxWidth()) {
        Text("Header")
    }
}

您可以根据自己的意愿自定义 Surface。

我会为弹跳问题创建另一个问题，它看起来像是一个单独的问题。

Answer 2

设置 StickyHeader 背景颜色会有所帮助。

stickyHeader {
                Text(
                    "text",
                    modifier = Modifier.padding(
                        top = 16.dp,
                        start = 8.dp,
                        end = 16.dp,
                        bottom = 8.dp
                    )
                   .background(colorResource(id = R.color.white))
                )
            }