垂直可滚动组件的测量具有无限最大高度限制，这是不允许的

Question

我在 recyclerview 项目布局中使用 ComposeView 来与 jetpack compose 配合使用。当我打开屏幕时遇到奇怪的问题

错误

java.lang.IllegalStateException: Vertically scrollable component was measured with an infinity maximum height constraints, which is disallowed. One of the common reasons is nesting layouts like LazyColumn and Column(Modifier.verticalScroll()). If you want to add a header before the list of items please add a header as a separate item() before the main items() inside the LazyColumn scope. There are could be other reasons for this to happen: your ComposeView was added into a LinearLayout with some weight, you applied Modifier.wrapContentSize(unbounded = true) or wrote a custom layout. Please try to remove the source of infinite constraints in the hierarchy above the scrolling container.

我试图遵循这个堆栈溢出但它不起作用

main_activity.xml

      <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/list"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="parent" />

item_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <androidx.compose.ui.platform.ComposeView
        android:id="@+id/itemComposable"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

  

viewholder.kt

class OptionsViewHolder(val binding: ItemLayoutBinding) : Recyclerview.ViewHolder(binding.root) {

    private val context = binding.root.context

    companion object {
        fun from(parent: ViewGroup): OptionsViewHolder {
            return OptionsViewHolder(
                ItemLayoutBinding.inflate(
                    LayoutInflater.from(parent.context),
                    parent,
                    false
                )
            )
        }
    }

    fun bindChoice() {
        binding.itemComposable.setContent {
            BoxWithConstraints {
                LazyColumn(
                    modifier = Modifier
                        .fillMaxWidth()
                        .height([email protected])
                        .verticalScroll(rememberScrollState())
                ) {
                    items(getOptions()) { option ->
                        Text(text = option)
                    }
                }
            }
        }
    }

    private fun getOptions() = mutableListOf(
        context.getString(R.string.monitor),
        context.getString(R.string.pressure),
        context.getString(R.string.not_sure)
    )
}

Answer 1

您在

LazyColumn

中使用

RecyclerView

，这是不允许的。

LazyColumn

相当于 Compose 中的

RecyclerView

。所以你正在嵌套 RecyclerViews 或 LazyColumns。

Answer 2

在 Jetpack Compose 中创建嵌套垂直列表。

嘿，这很简单，我想出来了..假设我们有一个数据结构 （在科特林中）

val allTransactions = List<Transaction>

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

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

首先有一个LazyColumn

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

@Composable
fun TransactionComposable(transaction: 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)
                }
            }
        }
    }
}