我正在努力使用 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时它才会起作用。但我认为这个问题一定有解决方案......