Jetpack Compose中Column内嵌套LazyColumn出现报错该如何解决

错误原因 #

不允许嵌套同方向的可滚动布局，例如LazyColumn和设置了Modifier.verticalScroll()的Column。如果您想要在列表项前添加头部，请参考LazyColumn组件的DSL API，您可以先通过item()函数添加头部，再通过items()函数添加列表项。

崩溃的核心原因是垂直可滚动的Column嵌套了同方向滚动的LazyColumn，Compose没有处理同方向嵌套滚动的默认逻辑，因此直接触发崩溃。

最优解决方案（推荐） #

将整个页面的所有内容都放到同一个LazyColumn中承载，既满足小屏设备整个页面可滚动的需求，又能保留LazyColumn的项复用特性，性能最优。

改造步骤 #

1. 移除外层ProfileContentSection中带verticalScroll修饰符的Column，替换为LazyColumn
2. 把原来的三个子模块AccountNameSection、UpScreenSection的内容、DownScreenSection分别作为LazyColumn的独立item/items插入

改造后代码 #

1. 调整内容结构，将所有内容迁移到外层统一的LazyColumn中

@Composable
fun ProfileContentSection(
    modifier: Modifier = Modifier,
    viewModel: ProfileViewModel
) {
    val context = LocalContext.current
    Box(
        modifier = modifier
            .fillMaxSize()
    ) {
        val state = viewModel.state.value

        // 替换原来带verticalScroll的Column为LazyColumn，统一承载所有页面内容
        LazyColumn(
            modifier = modifier.fillMaxSize()
        ) {
            // 头部模块作为单独item
            item {
                AccountNameSection(modifier = Modifier.fillMaxWidth(), viewModel = viewModel)
            }

            // UpScreenSection的固定内容作为单独item
            item {
                Spacer(modifier = Modifier.size(24.dp))
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(24.dp)
                ) {
                    // 此处保留UpScreenSection中原有的非列表固定内容
                }
            }

            // 原内部LazyColumn的列表项直接放到外层LazyColumn渲染
            if (!state.items.isNullOrEmpty()) {
                items(state.items) { item ->
                    ProfileListItems(item = item, onItemClick = {
                        //TODO Navigate to specific screen
                        when (it.id) {
                            1 -> {}
                            2 -> {}
                            3 -> {}
                            4 -> viewModel.navigate(ReferAFriendDestination.route())
                        }
                    })
                }
            }

            // UpScreenSection底部间距
            item {
                Spacer(modifier = Modifier.size(24.dp))
            }

            // 底部模块作为单独item
            item {
                DownScreenSection(modifier = Modifier.fillMaxWidth(), context)
            }
        }

        if (state.error.isNotBlank())
            SimpleSnackbar(
                text = state.error,
                modifier = modifier.align(Alignment.BottomCenter)
            )

        if (state.isLoading)
            Loading(modifier = modifier.align(Alignment.BottomCenter))
    }
}

改造后可以直接删除原有UpScreenSection中嵌套的LazyColumn相关逻辑。

临时兼容方案（不推荐，仅适合列表项<10个的场景） #

如果不想重构原有结构，可以给内部的LazyColumn关闭自身滚动、设置高度自适应内容，让滚动逻辑完全交给外层的Column，缺点是会失去LazyColumn的项复用能力，列表项多的时候会卡顿：

// 给内部LazyColumn添加以下修饰符即可
LazyColumn(
    modifier = modifier
        .fillMaxWidth()
        .wrapContentHeight(),
    userScrollEnabled = false // 关闭自身滚动能力
) {
    // 原有列表逻辑保持不变
}

内容的提问来源于stack exchange，提问作者Saeed Noshadi