android - Jetpack Compose 中带有分页库的粘性 header

Question

我目前正在使用新的 Jetpack compose UI 工具包，我非常喜欢它。我想不通的一件事是如何使用 stickyHeaders在 LazyColumn它由分页库填充。 documentation 中的非分页示例是:

val grouped = contacts.groupBy { it.firstName[0] }

fun ContactsList(grouped: Map<Char, List<Contact>>) {
    LazyColumn {
        grouped.forEach { (initial, contactsForInitial) ->
            stickyHeader {
                CharacterHeader(initial)
            }

            items(contactsForInitial) { contact ->
                ContactListItem(contact)
            }
        }
    }
}

由于我使用的是分页库，我无法使用 groupedBy所以我尝试使用 insertSeparators PagingData上的功能并像这样自己插入/创建 header (请忽略旧版 Date 代码，它仅用于测试):

// On my flow
.insertSeparators { before, after ->
        when {
            before == null -> ListItem.HeaderItem(after?.workout?.time ?: 0)
            after == null -> ListItem.HeaderItem(before.workout.time)
            (Date(before.workout.time).day != Date(after.workout.time).day) ->
                ListItem.HeaderItem(before.workout.time)
            // Return null to avoid adding a separator between two items.
            else -> null
        }
    }

// In my composeable
LazyColumn {
    items(workoutItems) {
        when(it) {
            is ListItem.HeaderItem -> this@LazyColumn.stickyHeader { Header(it) }
            is ListItem.SongItem -> WorkoutItem(it)
        }
    }
}

但这会产生我所有项目的列表，并且标题项目附加在最后。任何想法什么是使用 stickyHeader 的正确方法使用分页库时的功能？

Answer 1

我通过查看 items 的源代码让它工作了。功能:请勿调用stickyHeader在 items 内功能。根本不需要修改 PagingData 流。只需使用 peek 获取下一个项目而不触发重新加载，然后对其进行布局:

LazyColumn {
    var lastWorkout: Workout? = null

    for(index in workoutItems.indices) {
        val workout = workoutItems.peek(index)

        if(lastWorkout?.time != workout?.time) stickyHeader { Header(workout) }
        item { WorkoutItem(workoutItems.getAsState(index).value) } // triggers reload

        lastWorkout = workout 
    }
}