如何在Jetpack Compose中实现带分区标题的分页分组列表？

要同时实现分页查询和按section列分组展示，核心思路是先让数据库返回按section排序的分页数据，再在分页流中对数据进行分组处理，既保留分页的懒加载优势，又能生成符合需求的分组结构。

1. Room查询调整 #

放弃使用GROUP BY（它用于聚合统计，无法保留原始数据的分组结构），修改DAO查询语句，按section排序后分页：

@Query("SELECT * FROM your_table ORDER BY section ASC, id ASC LIMIT :limit OFFSET :offset")
suspend fun getPagedData(limit: Int, offset: Int): List<YourEntity>

这样每次分页请求拿到的数据都是按section连续排列的，为后续分组处理提供基础。

2. 定义分组数据模型 #

创建密封类区分分组标题和列表内容项，方便Compose中渲染不同UI：

sealed class ListItem {
    data class SectionHeader(val section: String) : ListItem()
    data class ContentItem(val entity: YourEntity) : ListItem()
}

3. 处理分页数据的分组逻辑 #

方式一：在PagingSource中直接处理 #

自定义PagingSource，在加载数据后立即完成分组转换，同时处理跨页重复的section标题：

class YourPagingSource(
    private val dao: YourDao,
    private var lastSection: String? = null
) : PagingSource<Int, ListItem>() {
    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, ListItem> {
        val page = params.key ?: 0
        val limit = params.loadSize
        val offset = page * limit

        return try {
            val rawData = dao.getPagedData(limit, offset)
            val groupedItems = mutableListOf<ListItem>()
            var currentSection: String? = null

            rawData.forEach { entity ->
                if (entity.section != currentSection) {
                    currentSection = entity.section
                    // 跳过和上一页重复的section标题
                    if (currentSection != lastSection) {
                        groupedItems.add(ListItem.SectionHeader(currentSection))
                    }
                }
                groupedItems.add(ListItem.ContentItem(entity))
            }
            // 更新最后一个section，用于下一页判断
            rawData.lastOrNull()?.let { lastSection = it.section }

            val prevKey = if (page > 0) page - 1 else null
            val nextKey = if (rawData.size == limit) page + 1 else null

            LoadResult.Page(
                data = groupedItems,
                prevKey = prevKey,
                nextKey = nextKey
            )
        } catch (e: Exception) {
            LoadResult.Error(e)
        }
    }

    override fun getRefreshKey(state: PagingState<Int, ListItem>): Int? {
        return state.anchorPosition?.let { anchorPosition ->
            state.closestPageToPosition(anchorPosition)?.prevKey?.plus(1)
                ?: state.closestPageToPosition(anchorPosition)?.nextKey?.minus(1)
        }
    }
}

方式二：在ViewModel中转换分页流 #

如果使用Room自带的PagingSource工厂，可在ViewModel中通过map操作转换分页数据：

val pagingItems = Pager(
    config = PagingConfig(pageSize = 20),
    pagingSourceFactory = { dao.getPagingSource() } // DAO返回PagingSource<Int, YourEntity>
).flow.map { pagingData ->
    var lastSection: String? = null
    pagingData.flatMap { entity ->
        val items = mutableListOf<ListItem>()
        if (entity.section != lastSection) {
            items.add(ListItem.SectionHeader(entity.section))
            lastSection = entity.section
        }
        items.add(ListItem.ContentItem(entity))
        items
    }
}.cachedIn(viewModelScope)

4. Jetpack Compose列表渲染 #

在Compose中使用LazyColumn结合LazyPagingItems，根据ListItem类型渲染对应UI：

@Composable
fun GroupedPagingList(pagingItems: LazyPagingItems<ListItem>) {
    LazyColumn {
        items(pagingItems) { item ->
            when (item) {
                is ListItem.SectionHeader -> {
                    Text(
                        text = item.section,
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(16.dp),
                        style = MaterialTheme.typography.titleMedium,
                        color = MaterialTheme.colorScheme.primary
                    )
                }
                is ListItem.ContentItem -> {
                    // 渲染内容项UI
                    Card(
                        modifier = Modifier
                            .fillMaxWidth()
                            .padding(horizontal = 16.dp, vertical = 4.dp),
                        elevation = CardDefaults.cardElevation(2.dp)
                    ) {
                        Text(
                            text = item.entity.content,
                            modifier = Modifier.padding(16.dp)
                        )
                    }
                }
                null -> {
                    // 加载占位
                    Box(
                        modifier = Modifier
                            .fillMaxWidth()
                            .height(80.dp),
                        contentAlignment = Alignment.Center
                    ) {
                        CircularProgressIndicator()
                    }
                }
            }
        }
    }
}

关键注意事项 #

• 必须保证Room查询按section排序，否则分页数据的section会混乱，导致分组错误。
• 跨页重复的section标题需要特殊处理，避免同一section在页面底部和下一页顶部重复显示标题。
• 分组逻辑仅针对单页数据处理，不会加载全量数据，完全保留分页的懒加载优势。

内容的提问来源于stack exchange，提问作者lostintranslation