Jetpack 在 Scrollabe 列中组合 LazyColumn

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

我希望.wrapContentHeight()LazyColumn 内部能够解决这个问题，但没有成功。

这是正确的做法吗？

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

Answer 1

这里的主要思想是将您的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() }
    }
}