I want to create the following layout in Jetpack compose.
我尝试在垂直可滚动框中创建两个列表,但这是不可能的,因为我收到了此错误:
“java.lang.IllegalStateException:不允许在同方向嵌套可滚动布局(如 ScrollableContainer 和 LazyColumn)。如果您想在项目列表之前添加标题,请查看 LazyColumn 组件,该组件具有 DSL api,允许首先通过 item() 函数添加标题,然后通过 items() 添加项目列表。”
我尝试使用以下代码在父列表中创建两个不同的列表,但这也不起作用。
@Composable
fun MainList() {
LazyColumn() {
item {
/* LazyRow code here */
}
item {
/* LazyColumn code here */
}
}
}
现在我不知道还有什么可以尝试在同一活动上实现两个列表(一个垂直列表和一个水平列表)并保持活动也可以垂直滚动。
我认为最好的选择是LazyVerticalGrid
允许对每个项目进行某种扩展逻辑,但看起来尚不支持(beta-03)。
所以我将使用一个单一的解决方案留在这里LazyColumn
对于整个列表和LazyRow
对于“我的图书”部分。
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]
}
}
}
这是我的完整解决方案的要点 https://gist.github.com/nglauber/64df9091c2e76bde648ce48d585ed3e1结果如下所示。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)