在撰写中嵌套可滚动答案

【问题标题】：Nesting scrollable's in compose在撰写中嵌套可滚动
【发布时间】：2023-02-22 22:49:28
【问题描述】：

Compose 不允许在同一方向嵌套可滚动项。但是我有一个布局由多个部分组成的用例。每个部分可以是列表、网格、常规文本等...整个布局是可滚动的。

Recyclerview 支持多种视图类型（例如，一个视图可以是另一个基于网格的 recyclerview）

但是在 compose 中，如果你使用 lazycolumn 使整个布局可滚动，你就不能再在其中使用 LazyHorizontalGrid 和 LazyVerticalGrid。你必须使用 column 构建你的网格

关于如何解决这个问题的任何想法？

【问题讨论】：

标签： android android-jetpack-compose

【解决方案1】：

您需要将其用作表面或盒子内的修饰符：

modifier = Modifier.nestedScroll(rememberViewInteropNestedScrollConnection())

然后你可以像这样轻松地使用 lazyHorizontalGrid：

 LazyColumn {
            //other contents
            item {
                LazyHorizontalGrid(
                    modifier = Modifier.height(176.dp), // itemHeight * rowCount + verticalSpacing * (rowCount - 1)
                    rows = GridCells.Fixed(3),
                    horizontalArrangement = Arrangement.spacedBy(16.dp),
                    verticalArrangement = Arrangement.spacedBy(16.dp)
                ) {
                    items(arrayList.size) {
                        Text(arrayList[it], modifier = Modifier.height(48.dp))
                    }
                }
            }

【讨论】：

rememberViewInteropNestedScrollConnection() 怎么了？没关注

【解决方案2】：

这很简单，我想通了..说我们有一个数据结构（在科特林中）

在 Jetpack Compose 中制作嵌套的垂直列表。

val allTransactions = List<Transaction>

val monthlyTransaction = Transaction(monthName: String, monthlyTransactions: List< MonthlyTransactions>)

val monthlyTransaction = MonthlyTransaction(amount: String, date: String)

@Composable
fun mainFunction (){
    // first have a LazyColumn

    LazyColumn {
        if (allTransactions.isNotEmpty()) {
            items(allTransactions.size) { index ->
                // pass each model
                TransactionComposable(model = allTransactions[index])
            }
        }
    }
}

@Composable
fun TransactionComposable(transaction: SurfaceControl.Transaction) {

    // make the title outside the column so it will be on top of the list
    Text(text = transaction.monthName)

    Column {
        // make a for each loop inside the column
        transaction.monthlyTransactions.forEach { monthlyTransaction ->
                // for each of your iteration, call your inner list item inside a a row
                Row {
                    TransactionDetailComponent (monthlyTransaction)
                }
            }
        }
    }
}

【讨论】：