带有Paging 3 JetPack的粘性标题组成

发布于 2025-02-11 03:50:04 字数 2526 浏览 1 评论 0原文

我正在尝试实现粘性标头，如示例在这里页面

LazyColumn(
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {

        // TODO (HADI) enhance later
        notifications.itemSnapshotList.items.groupBy { extractNotificationHeader(it) }
            .forEach { (header, messages) ->
                stickyHeader {
                    NotificationHeader(
                        modifier = Modifier.fillMaxWidth(),
                        value = header
                    )
                }

                items(
                    items = messages,
                    key = { message -> message.notificationId },
                ) {
                    NotificationMessage(
                        notification = it,
                        onNotificationClick = { onNotificationClick(it) }
                    )
                }
            }
}

使用从后端，只有2页，因为我使用的代码：

// API service method 
@GET("notifications")
suspend fun getNotifications(
    @Query("page") page: Int,
    @Query("page_size") pageSize: Int = 30
): GenericResponse<NotificationsJson>


// data source impl
class NotificationDataSourceImpl @Inject constructor(private val notificationApiService: NotificationApiService) : NotificationDataSource {

override val invalidatingFactory = InvalidatingPagingSourceFactory {
    NotificationMediator(notificationApiService)
}
override fun loadNotifications(): Flow<PagingData<NotificationCenterMessage>> {
    return Pager(
        config = PagingConfig(
            pageSize = 30,
            enablePlaceholders = false,
        ),
        pagingSourceFactory = invalidatingFactory
    ).flow
}
 override fun invalidateNotifications() {
    invalidatingFactory.invalidate()
}
}

问题是我还有7页，但是当我到达懒惰列项目的底部位置时，它们没有加载，我尝试只使用没有项目循环且粘稠的标题很好，而且工作正常。我已经查找了许多解决方案，例如在这里，但是没有任何事情可以根据需要起作用。另外，当用户单击以要读取时，我还试图在特定位置标记通知，但是当我使用无效（）时即使我使用 AnimatesCrollToItem（） remell lake lazylistState（）

原文

I am trying to implement sticky headers as shown in the example here, with paging using Jetpack compose LazyColumn as shown bellow :

LazyColumn(
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(20.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {

        // TODO (HADI) enhance later
        notifications.itemSnapshotList.items.groupBy { extractNotificationHeader(it) }
            .forEach { (header, messages) ->
                stickyHeader {
                    NotificationHeader(
                        modifier = Modifier.fillMaxWidth(),
                        value = header
                    )
                }

                items(
                    items = messages,
                    key = { message -> message.notificationId },
                ) {
                    NotificationMessage(
                        notification = it,
                        onNotificationClick = { onNotificationClick(it) }
                    )
                }
            }
}

but I get requests from back-end with only 2 pages as I am using code like :

// API service method 
@GET("notifications")
suspend fun getNotifications(
    @Query("page") page: Int,
    @Query("page_size") pageSize: Int = 30
): GenericResponse<NotificationsJson>


// data source impl
class NotificationDataSourceImpl @Inject constructor(private val notificationApiService: NotificationApiService) : NotificationDataSource {

override val invalidatingFactory = InvalidatingPagingSourceFactory {
    NotificationMediator(notificationApiService)
}
override fun loadNotifications(): Flow<PagingData<NotificationCenterMessage>> {
    return Pager(
        config = PagingConfig(
            pageSize = 30,
            enablePlaceholders = false,
        ),
        pagingSourceFactory = invalidatingFactory
    ).flow
}
 override fun invalidateNotifications() {
    invalidatingFactory.invalidate()
}
}

the problem is I have 7 more pages, but they are not loaded when I reach the bottom position of the lazy column items, I've tried to use only items without looping and sticky headers and it's working fine.
I've looked up for many solutions like here, but nothing worked as required.
Also I am trying to mark notification at specific position when the user click it to be read, but when I use invalidateNotifications()
the page reload and I lose the position even when I use animateScrollToItem() with rememberLazyListState()

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

栩栩如生 2025-02-18 03:50:04

负载是由lazypagingItemss.get方法触发的，并且您不会在任何地方调用它。修改您的extractnificationheader函数以返回标头和消息的索引，而不是模型，然后在stickyheader and 项目中，使用它们，例如> notifications.get（headerIndex）。