android - Jetpack 撰写 : How to put a LazyVerticalGrid inside a scrollable Column?

Question

当试图把 LazyVerticalGrid在 内可滚动 Column我收到以下错误:

java.lang.IllegalStateException: Nesting scrollable in the samedirection layouts like LazyColumn andColumn(Modifier.verticalScroll()) is not allowed. If you want to add aheader before the list of items please take a look on LazyColumncomponent which has a DSL api which allows to first add a header viaitem() function and then the list of items via items().

我不是在做一个传统的列表，我只是有很多元素太大而无法在屏幕上显示。因此，我希望列滚动，以便我可以看到所有元素。这是我的代码:

@ExperimentalFoundationApi
@Composable
fun ProfileComposable(id: String?) {
    val viewModel: ProfileViewModel = viewModel()
    if (id != null) {
        viewModel.getProfile(id)
        val profile = viewModel.profile.value
        val scrollState = rememberScrollState()
        if (profile != null) {
            Column(modifier = Modifier
                .fillMaxWidth()
                .fillMaxHeight()
                .verticalScroll(scrollState)) {
                Row() {
                    ProfilePic(profile.getImgUrl(), profile.name)
                    Column(Modifier.padding(16.dp)) {
                        ProfileName(profile.name)
                        Stats(profile.stats) //      <--------------- the offending composable
                    }
                }
                Sprites(sprites = profile.sprites)
                TextStat(profile.id.toString(), "Pokemon Number")
                TextStat(profile.species.name, "Species")
                TextStat(profile.types.joinToString { it.type.name }, "Types")
                TextStat(profile.weight.toString(), "Weight")
                TextStat(profile.forms.joinToString { it.name }, "Forms")
            }
        } else {
            Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
                CircularProgressIndicator()
            }
        }
    } else {
        Text("Error")
    }
} 

Stats()可组合包含 LazyVerticalGrid导致错误:

@ExperimentalFoundationApi
@Composable
fun Stats(stats: List<Stat>) {
    LazyVerticalGrid(cells = GridCells.Fixed(2)) {
        itemsIndexed(stats) { index, item ->
            StatBox(stat = item)
        }
    }
}

我不希望网格滚动，我只想在可滚动列中显示网格。

Answer 1

我自己也遇到了这个问题。正如@gaohomway 所说，您最好的选择是使用 Google 的 Accompanist library 中的实验性 FlowRow() .
以下是一个工作代码 fragment 作为示例:

@Composable
fun ProfileScreen2() {
    LazyColumn(
        modifier = Modifier
            .fillMaxSize()
    ) {
        item {
            Box(modifier = Modifier.fillMaxWidth().height(200.dp).background(color = Red))
        }

        item {
            Box(modifier = Modifier.fillMaxWidth().height(200.dp).background(color = Gray))
        }

        item {
            FlowRow() {
                SampleContent()
            }
        }
    }
}

@Composable
internal fun SampleContent() {
    repeat(60) {
        Box(
            modifier = Modifier
                .size(64.dp)
                .background(Blue)
                .border(width = 1.dp, color = DarkGray),
            contentAlignment = Alignment.Center,
        ) {
            Text(it.toString())
        }
    }
}

显示此可滚动页面(不要介意底部的导航栏):