Jetpack Compose LazyColumn inside Scrollabe Column

Question

这是我的情况：我必须在我的应用程序中显示我从 API 收到的记录的详细信息。在这个视图中，我可能需要也可能不需要根据字段显示来自另一个视图模型的一些数据。

这是我的代码：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ViewDetail(viewModel: MainViewModel, alias: String?, otherViewModel: OtherViewModel) {
    viewModel.get(alias)

    Scaffold {
        val isLoading by viewModel.isLoading.collectAsState()
        val details by viewModel.details.collectAsState()

        when {
            isLoading -> LoadingUi()
            else -> Details(details, otherViewModel)
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun Details(details: Foo?, otherViewModel: OtherViewModel) {
    details?.let { sh ->
        val scrollState = rememberScrollState()

        Column(
            modifier = Modifier
                .fillMaxSize()
                .verticalScroll(scrollState),
        ) {
            Text(sh.title, fontSize = 24.sp, lineHeight = 30.sp)

            Text(text = sh.description)

            if (sh.other.isNotEmpty()) {
                otherViewModel.load(sh.other)
                val others by otherViewModel.list.collectAsState()

                Others(others)
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun Others(others: Flow<PagingData<Other>>) {
    val items: LazyPagingItems<Other> = others.collectAsLazyPagingItems()

    LazyColumn(
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight(),
        contentPadding = PaddingValues(16.dp),
    ) {
        items(items = items) { item ->
            if (item != null) {
                Text(text = item.title, fontSize = 24.sp)

                Spacer(modifier = Modifier.height(4.dp))

                Text(text = item.description)
            }
        }

        if (items.itemCount == 0) {
            item { EmptyContent() }
        }
    }
}

此处的所有描述可能很长，无论是在主要详细信息正文中还是在其他（如果存在）中，所以这就是请求滚动行为的原因。

问题：我收到此错误：

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()).

我希望 LazyColumn 中的.wrapContentHeight()可以解决问题，但无济于事。

这是正确的方法吗？

上下文：所有包都更新到 maven 上可用的最新版本

Answer 1

您可以使用如下系统

@Composable
fun Test() {
    Box(Modifier.systemBarsPadding()) {
        Details()
    }
}

@Composable
fun Details() {
    LazyColumn(Modifier.fillMaxSize()) {
        item {
            Box(Modifier.background(Color.Cyan).padding(16.dp)) {
                Text(text = "Hello World!")
            }
        }
        item {
            Box(Modifier.background(Color.Yellow).padding(16.dp)) {
                Text(text = "Another data")
            }
        }
        item {
            Others()
        }
    }
}

@Composable
fun Others() {
    val values = MutableList(50) { it }

    values.forEach {
        Box(
            Modifier
                .fillMaxWidth()
                .padding(16.dp)
        ) {
            Text(text = "Value = $it")
        }
    }
}

滚动的结果是：

Answer 2

这里的主要想法是将您的Column与LazyColumn合并。

由于您的代码不可运行，我给出了更多的伪代码，理论上应该可以工作。

直接从可组合构建器调用otherViewModel.load(sh.other)也是错误的。 根据compose 中的想法，为了获得最佳性能，您的视图应该没有副作用。 为了解决这个问题，Compose 有特殊的副作用函数。 现在你的代码将在每次重组时被调用。

if (sh.other.isNotEmpty()) {
    LaunchedEffect(Unit) {
        otherViewModel.load(sh.other)
    }
}
val others by otherViewModel.list.collectAsState()

LazyColumn(
    modifier = Modifier
        .fillMaxSize()
        .wrapContentHeight(),
    contentPadding = PaddingValues(16.dp),
) {
    item {
        Text(sh.title, fontSize = 24.sp, lineHeight = 30.sp)

        Text(text = sh.description)
    }
    
    items(items = items) { item ->
        if (item != null) {
            Text(text = item.title, fontSize = 24.sp)

            Spacer(modifier = Modifier.height(4.dp))

            Text(text = item.description)
        }
    }

    if (items.itemCount == 0) {
        item { EmptyContent() }
    }
}