Jetpack compose 中 [NestedScrollView + RecyclerView] 或 [Nested RecyclerView (Recycler inside another recycler) 的等价物是什么 [英] What is the equivalent of [NestedScrollView + RecyclerView] or [Nested RecyclerView (Recycler inside another recycler) in Jetpack compose

问题描述

我想在 Jetpack compose 中创建以下布局.

我尝试在垂直可滚动的 Box 内创建两个列表，但这是不可能的，因为我收到了此错误:"java.lang.IllegalStateException:不允许在相同方向的布局中嵌套可滚动，例如 ScrollableContainer 和 LazyColumn.如果您想在项目列表之前添加标题，请查看 LazyColumn 组件，该组件具有 DSL api，它允许首先通过 item() 函数添加标题，然后通过 items() 函数添加项目列表."

我尝试使用以下代码在父列表中创建两个不同的列表，但这也不起作用.

@Composable有趣的主列表(){懒惰的列(){物品 {/* 这里是 LazyRow 代码 */}物品 {/* 这里的 LazyColumn 代码 */}}}

现在我不知道还有什么可以尝试在同一个活动中实现两个列表(一个垂直和一个水平)并保持活动垂直滚动.

解决方案

我认为最好的选择是 LazyVerticalGrid 允许对每个项目进行某种扩展逻辑，但看起来不是尚支持 (beta-03).

所以我将我的解决方案用一个 LazyColumn 用于整个列表，将 LazyRow 用于My Books".部分.

LazyColumn(修饰符 = Modifier.fillMaxSize(),){//我的书部分物品 {列(修饰符 = Modifier.fillMaxWidth()) {文本(我的书")懒惰行{项目(书籍){ 项目 ->//每个物品}}}}//列入名单的图书名称物品 {Text(Whishlisted Books", style = MaterialTheme.typography.h4)}//将列表转换为每个包含两个元素的列表items(wishlisted.windowed(2, 2, true)) { item ->排 {//绘制项目[0]//绘制项目[1]}}}

这是我的

I want to create the following layout in Jetpack compose.

I've tried creating two lists inside a vertical scrollable Box but that's not possible as I got the this error: "java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like ScrollableContainer and LazyColumn is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items()."

I've tried creating two different lists inside a parent list by using the following code, but that doesn't work either.

@Composable
fun MainList() {
    LazyColumn() {
        
        item {
            /* LazyRow code here */
        }
        
        item {
            /* LazyColumn code here */
        }
    }
}

Now I'm clueless about what else could I try to achieve two lists (one vertical and one horizontal) on the same activity and keep the activity vertically scrollable too.

解决方案

I think the best option, would be if the LazyVerticalGrid allows some sort of expand logic on each item, but looks like it's not supported yet (beta-03).

So I'm leaving here my solution using one single LazyColumn for the entire list and LazyRow for "My Books" section.

LazyColumn(
    modifier = Modifier.fillMaxSize(),
) {
    // My Books section
    item {
        Column(modifier = Modifier.fillMaxWidth()) {
            Text("My Books")
            LazyRow {
                items(books) { item ->
                    // Each Item
                }
            }
        }

    }
    // Whishlisted Books title
    item {
        Text("Whishlisted Books", style = MaterialTheme.typography.h4)
    }
    // Turning the list in a list of lists of two elements each
    items(wishlisted.windowed(2, 2, true)) { item ->
        Row {
            // Draw item[0]
            // Draw item[1]
        }
    }
}

Here is my gist with the full solution and the result is listed below.

这篇关于Jetpack compose 中 [NestedScrollView + RecyclerView] 或 [Nested RecyclerView (Recycler inside another recycler) 的等价物是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！