![](/img/trans.png)
[英]What is the Jetpack Compose equivalent of RecyclerView or ListView?
[英]What is the equivalent of [NestedScrollView + RecyclerView] or [Nested RecyclerView (Recycler inside another recycler) in Jetpack compose
我嘗試在垂直可滾動框中創建兩個列表,但這是不可能的,因為我得到了這個錯誤:“java.lang.IllegalStateException:不允許在相同方向的布局中嵌套可滾動,如 ScrollableContainer 和 LazyColumn。如果你想添加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()."
我嘗試使用以下代碼在父列表中創建兩個不同的列表,但這也不起作用。
@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]
}
}
}
這是我的完整解決方案的要點,結果如下所示。
嵌套的 RecyclerViews 的一個簡單等價物是嵌套的 LazyColumns。 指定內部 LazyColumns 的高度並將它們放在item {}塊內。 這是一個示例代碼和 output。
@Composable
fun NestedLists() {
LazyColumn(Modifier.fillMaxSize().padding(12.dp),
horizontalAlignment = Alignment.CenterHorizontally) {
//Header for first inner list
item {
Text(text = "List of numbers:", style = MaterialTheme.typography.h5)
}
// First, scrollable, inner list
item {
// Note the important height modifier.
LazyColumn(Modifier.height(100.dp)){
val numbersList = (0 .. 400 step 4).toList()
itemsIndexed(numbersList) { index, multipleOf4 ->
Text(text = "$multipleOf4", style = TextStyle(fontSize = 22.sp, color = Color.Blue))
}
}
}
// Header for second inner list
item {
Text(text = "List of letters:", style = MaterialTheme.typography.h5)
}
// Second, scrollable, inner list
item {
// Note the important height modifier.
LazyColumn(Modifier.height(200.dp)) {
val lettersList = ('a' .. 'z').toList()
itemsIndexed(lettersList) { index, letter ->
Text(text = "$letter", style = TextStyle(color = Color.Blue, fontSize = 22.sp))
}
}
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.