Jetpack撰写:如何将LazyVerticalGrid放在可滚动列中？
当试图将LazyVerticalGrid放入可滚动 Column中时，我会得到以下错误：
java.lang.IllegalStateException:不允许在相同方向上嵌套滚动布局，如LazyColumn和Column(Modifier.verticalScroll())。如果您想在项目列表之前添加标题，请查看LazyColumn组件，它具有DSL，它允许首先通过item()函数添加标头，然后通过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)
}
}
}我不希望网格滚动，我只想在一个可滚动的列中显示一个网格。
回答 4
Stack Overflow用户
发布于 2021-10-30 11:23:21
我自己也遇到了这个问题。正如@gaohomway所说，你最好的选择是使用来自谷歌伴奏库的实验性FlowRow()。
下面是一个工作代码片段，作为一个示例：
@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())
}
}
}显示此可滚动页面(不要介意底部的导航栏)：
Stack Overflow用户
发布于 2022-01-02 10:15:17
我有一个类似的用例，目标是设计一个配置文件屏幕，上面有大量的信息和统计数据，然后作为一个网格出现在屏幕的底部。
最后，我对整个列表使用了LazyVerticalGrid，并为需要填充整个屏幕的项目设置了完整的范围：
LazyVerticalGrid(cells = GridCells.Fixed(3)) {
item(span = { GridItemSpan(3) }) { TopInfo() }
item(span = { GridItemSpan(3) }) { SomeOtherInfo() }
item(span = { GridItemSpan(3) }) { BottomInfo() }
items(gridItems) { GridItemView(it) }
}Stack Overflow用户
发布于 2021-10-02 13:44:51
原因
不允许在相同方向上嵌套滚动布局，如LazyColumn和Column(Modifier.verticalScroll())。
找不到LazyVerticalGrid暂时禁止滚动
替代品
来自Android官方Jetpack组合流布局的替代库
FlowRow {
// row contents
}
FlowColumn {
// column contents
}https://stackoverflow.com/questions/67919707
复制相似问题
腾讯云开发者
