我没有找到任何方法将stickyHeader 与LazyColumn 中的项目放在同一行:
因此,我使用 Box 将带有背景的字母放在 LazyColumn 顶部,并使用 LazyListState 将其放在正确的位置:
@Preview
@Composable
fun InlineStickyList() {
val unsorted = listOf(...) // Pair("FirstName","LastName")
val data = unsorted.sortedBy { it.second[0] }
val groups = data.groupBy { it.second[0] }
@Composable
fun Person(pair: Pair<String, String>, showLetter: Boolean) {
Row(
modifier = Modifier
.fillMaxWidth()
.background(Color.White),
verticalAlignment = Alignment.CenterVertically
) {
Text(
"${pair.second[0]}",
modifier = Modifier
.padding(10.dp)
.alpha(if (showLetter) 1f else 0f),
fontSize = 20.sp
)
Text("${pair.first} ${pair.second}")
}
}
val state = rememberLazyListState()
Box(modifier = Modifier.fillMaxSize()) {
LazyColumn(modifier = Modifier.fillMaxSize(), state = state) {
groups.forEach { (_, group) ->
item {
Person(group[0], true)
}
items(group.subList(1, group.size)) {
Person(it, false)
}
}
}
}
val letter =
data[state.firstVisibleItemIndex].second[0]
val next =
data[state.firstVisibleItemIndex + 1].second[0]
Text(
"$letter",
fontSize = 20.sp,
modifier = Modifier
.clipToBounds()
.offset(y = if (letter != next) -with(LocalDensity.current) {
state.firstVisibleItemScrollOffset.toDp()
} else 0.dp)
.background(Color.White)
.padding(start = 10.dp, top = 10.dp, bottom = 10.dp),
)
}
还有其他方法可以实现吗?(更清洁/更好)