在列内使用 lazyColum 在 Jetpack Compose 中出现错误

Use lazyColum inside the column has an error in the Jetpack Compose

提问人:Saeed Noshadi 提问时间:11/3/2021 更新时间:3/16/2023 访问量:8426

问:

我有一个 lazyColumn,我想在列内使用,但我收到以下错误并且应用程序崩溃:

Nesting scrollable in the same direction layouts like LazyColumn and Column(Modifier.verticalScroll()) is not allowed. If you want to add a header before the list of items please take a look on LazyColumn component which has a DSL api which allows to first add a header via item() function and then the list of items via items()

lazyColumn 代码,我在这个代码中有一个列表:


@Composable
fun UpScreenSection(
    modifier: Modifier,
    state: ProfileState,
    viewModel: ProfileViewModel
) {
    Spacer(modifier = Modifier.size(24.dp))

    Column(
        modifier = modifier
            .fillMaxSize()
            .padding(24.dp)
    ) {
        if (!state.items.isNullOrEmpty()) {
            Box(
                modifier = modifier
                    .fillMaxSize()
            ) {
                LazyColumn(modifier = modifier.fillMaxSize()) {
                    items(state.items) { item ->
                        ProfileListItems(item = item, onItemClick = {
                            //TODO Navigate to specific screen
                            when (it.id) {
                                1 -> {
                                }
                                2 -> {
                                }
                                3 -> {
                                }
                                4 -> viewModel.navigate(ReferAFriendDestination.route())
                            }
                        })
                    }
                }
            }
        }
    }
    Spacer(modifier = Modifier.size(24.dp))
}

上述代码在以下可组合代码中使用:

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

        Column(
            modifier = modifier
                .fillMaxSize()
                .verticalScroll(state = scrollState)
        ) {
            AccountNameSection(modifier = modifier, viewModel = viewModel)
            UpScreenSection(modifier, state, viewModel)   // used above block codes
            DownScreenSection(modifier, context)
        }
        if (state.error.isNotBlank())
            SimpleSnackbar(
                text = state.error,
                modifier = modifier.align(Alignment.BottomCenter)
            )

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

    }
}

如何修复此错误?

注意:我想要一个可滚动的屏幕,其中包含一个小型设备的列表

安卓 android-jetpack-compose-text

评论


答:

11赞 Saeed Noshadi 11/3/2021 #1

我找到了解决方案。 我必须将 LayzyColumn 中的每个视图移到其中。

例:

@Composable
fun SampleScreen(){
    LazyColumn{
        item {
            // other views
        }

         items(state.items){listItem ->
          //Load list data 
         }

          item {
           //other views
          }
     }
}

使用此代码,我将拥有一个具有可滚动视图的屏幕。

评论

3赞 m.reiter 8/17/2022
以防万一有人想要构建类似的布局:在这个例子中,你可以放下 Box & Column,它会正常工作
0赞 Risal Fajar Amiyardi 2/2/2023
是的,和是不必要的BoxColumn