在Jetpack中相当于[NestedScrollView + RecyclerView]或[Nested RecyclerView(另一台回收站内的回收站) [英] What is the equivalent of [NestedScrollView + RecyclerView] or [Nested RecyclerView (Recycler inside another recycler) in Jetpack compose
问题描述
我想在Jetpack compose中创建以下布局.
我尝试在垂直的可滚动框内创建两个列表,但是由于出现此错误,所以这是不可能的:" java.lang.IllegalStateException:不允许嵌套可滚动的相同方向的布局,例如ScrollableContainer和LazyColumn.如果要在项目列表之前添加标头,请查看LazyColumn组件,该组件具有DSL api,该API允许首先通过item()函数添加标头,然后通过items()添加项目列表./p>
我尝试使用以下代码在父列表中创建两个不同的列表,但这也不起作用.
@Composable有趣的MainList(){LazyColumn(){物品 {/* LazyRow代码在这里*/}物品 {/* LazyColumn代码在这里*/}}}
现在,我对于在同一活动中还能实现两个列表(一个垂直和一个水平)并使该活动垂直滚动的其他方式一无所知.
我认为最好的选择是 LazyVerticalGrid
允许在每个项目上使用某种扩展逻辑,但看起来并非如此还受支持(测试版03).
因此,我将在这里使用一个单独的 LazyColumn
表示整个列表,并使用 LazyRow
表示我的书";部分.
LazyColumn(修饰符= Modifier.fillMaxSize(),){//我的书籍部分物品 {列(修饰符= Modifier.fillMaxWidth()){文字(我的书")LazyRow {项(书){项->//每个物品}}}}//收藏清单书名物品 {文字(收藏清单",样式= MaterialTheme.typography.h4)}//在每个都有两个元素的列表的列表中翻转列表items(wishlisted.windowed(2,2,true)){item->排 {//绘制项目[0]//绘制项目[1]}}}
这是我的
I want to create the following layout in Jetpack compose.
I've tried creating two lists inside a vertical scrollable Box but that's not possible as I got the this error: "java.lang.IllegalStateException: Nesting scrollable in the same direction layouts like ScrollableContainer and LazyColumn 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()."
I've tried creating two different lists inside a parent list by using the following code, but that doesn't work either.
@Composable
fun MainList() {
LazyColumn() {
item {
/* LazyRow code here */
}
item {
/* LazyColumn code here */
}
}
}
Now I'm clueless about what else could I try to achieve two lists (one vertical and one horizontal) on the same activity and keep the activity vertically scrollable too.
I think the best option, would be if the LazyVerticalGrid
allows some sort of expand logic on each item, but looks like it's not supported yet (beta-03).
So I'm leaving here my solution using one single LazyColumn
for the entire list and LazyRow
for "My Books" section.
LazyColumn(
modifier = Modifier.fillMaxSize(),
) {
// My Books section
item {
Column(modifier = Modifier.fillMaxWidth()) {
Text("My Books")
LazyRow {
items(books) { item ->
// Each Item
}
}
}
}
// Whishlisted Books title
item {
Text("Whishlisted Books", style = MaterialTheme.typography.h4)
}
// Turning the list in a list of lists of two elements each
items(wishlisted.windowed(2, 2, true)) { item ->
Row {
// Draw item[0]
// Draw item[1]
}
}
}
Here is my gist with the full solution and the result is listed below.
这篇关于在Jetpack中相当于[NestedScrollView + RecyclerView]或[Nested RecyclerView(另一台回收站内的回收站)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!