在两个方向上(水平且垂直)的无限滚动在JetPack组成

发布于 2025-01-24 02:09:35 字数 1322 浏览 0 评论 0原文

我想实现2条无限滚动。喷气背包中的水平分页和垂直分页仅组成。

LazyRow(){
       LazyColumn()
         {
           // Horizontal item will be shown here
           // Horizontal Pagination
         }
       //Vertical Pagination
    }

编辑1:我正在实施Netflix UI之类的东西。有一个类别和与之相关的项目。您可以水平滚动它们。除此之外,您还可以垂直滚动页面以查看更多类别内容。我能够使用以下代码实现垂直分页。

@Composable
fun Pagination(
    listState: LazyListState, buffer: Int = 5, action: () -> Unit
) {
    var lastTotalItems = -1
    val loadMore = remember {
        derivedStateOf {
            val layoutInfo = listState.layoutInfo
            val totalItemsNumber = layoutInfo.totalItemsCount
            val lastVisibleItemIndex = (layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0) + 1
            val loadMore = lastVisibleItemIndex > (totalItemsNumber - buffer) && (lastTotalItems != totalItemsNumber)
            
            loadMore
        }
    }
    LaunchedEffect(loadMore) {
        snapshotFlow { loadMore.value }
            .distinctUntilChanged()
            .collect {
               
                if (it) {
                    lastTotalItems = listState.layoutInfo.totalItemsCount
                    action()
                }
            }
    }
}

但是问题是如何将ListState保留为水平滚动的每个类别。如果我要更新类别数据,那么它将再次重新组装所有项目。我认为这不会是个好主意。

I want to implement 2 way infinite scrolling. Horizontal pagination as well as Vertical Pagination in Jetpack compose only.

LazyRow(){
       LazyColumn()
         {
           // Horizontal item will be shown here
           // Horizontal Pagination
         }
       //Vertical Pagination
    }

Edit 1: I am implementing something like Netflix UI. Where there is a category and items related to that. You can scroll them horizontally. Other than that you can also scroll page vertically to see more category content. I am able to implement vertical pagination using below code.

@Composable
fun Pagination(
    listState: LazyListState, buffer: Int = 5, action: () -> Unit
) {
    var lastTotalItems = -1
    val loadMore = remember {
        derivedStateOf {
            val layoutInfo = listState.layoutInfo
            val totalItemsNumber = layoutInfo.totalItemsCount
            val lastVisibleItemIndex = (layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0) + 1
            val loadMore = lastVisibleItemIndex > (totalItemsNumber - buffer) && (lastTotalItems != totalItemsNumber)
            
            loadMore
        }
    }
    LaunchedEffect(loadMore) {
        snapshotFlow { loadMore.value }
            .distinctUntilChanged()
            .collect {
               
                if (it) {
                    lastTotalItems = listState.layoutInfo.totalItemsCount
                    action()
                }
            }
    }
}

But problem is how can i keep listState for every category for horizontal scroll. If i will update the category data then it will recompose all the items again. I dont think that will be a good idea.

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

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文