1

我没有找到任何方法将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),
    )
}

还有其他方法可以实现吗?(更清洁/更好)

4

0 回答 0