如何在 Compose Jetpack 中创建回收站视图？

Question

在Compose Jetpack中创建recyclerView有什么特殊的方法吗？还是和往常一样？

Answer 1

在 list/recyclerview 的 jetnews 示例项目中，他们使用 VerticalScroller 和 Column 并使用 forEach 填充 @Composable 函数下的项目是例子

@Composable
private fun TabWithTopics(tabname: String, topics: List<String>) {
    VerticalScroller {
        Column {
            HeightSpacer(16.dp)
            topics.forEach { topic ->
                TopicItem(
                    getTopicKey(
                        tabname,
                        "- ",
                        topic
                    ), topic
                )
                TopicDivider()
            }
        }
    }
}

对于 class 和方法检查此 link

https://github.com/android/compose-samples/blob/master/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt

有关更多信息，您可以 download/clone jetnews 从这里查看示例 link

https://github.com/android/compose-samples/tree/master/JetNews

对于最新的 Jetpack alpha 版本更新如下：

@Composable
fun LazyRowItemsDemo() {
    LazyRowFor(items = (1..1000).toList()) {
        Text(text = "Item $it")
    }
}

LazyColumnFor 垂直列表
LazyRowFor 水平列表

希望对您有所帮助。

Answer 2

JetNews 应用程序中的示例包含静态数据。值得一提的是，根据 recent Google presentation（尤其是 18:30），我们应该考虑 ScrollingList，它适用于元素数量未定义的列表（例如从网上下载），传统上由 RecyclerView 处理的内容。那么，它应该是这样的：

@Composable
fun NewsFeed(stories: List<StoryData>) {
  ScrollingList(stories) { story ->
    StoryWidget(story)
  }
}

或者我们可以用 LiveData 或 RxJava Observable/Flowable:

做类似的事情

@Composable
fun NewsFeed(stories: LiveData<List<StoryData>>) {
  ScrollingList(stories.observe()) { story ->
    StoryWidget(story)
  }
}

在这种情况下，我们在迭代的每个步骤中重新使用 StoryWidget（或我们选择的任何其他小部件），并通过 lambda 表达式动态发出数据。

Answer 3

According to this article有新版本：

@Composable
fun <T> AdapterList(
 data: List<T>,
 modifier: Modifier = Modifier.None,
  itemCallback: @Composable() (T) -> Unit
)

@Composable
 fun Scrollable(
dragDirection: DragDirection,
scrollableState: ScrollableState,
onScrollStarted: (startedPosition: PxPosition) -> Unit = {},
onScrollStopped: (velocity: Float) -> Unit = {},
enabled: Boolean = true,
children: @Composable() () -> Unit
)

 AdapterList(
    data = (1..20).map { it }.toList()
) {
    if (it % 2 == 0) {
        Text("$it Even", style = TextStyle(fontSize = 40.sp, color = 
  Color.Gray))
    } else {
        Text(text = "$it Odd", style = TextStyle(fontSize = 70.sp))
    }
}

Answer 4

UPDATED 和 dev06 Jetpack Compose 的当前实现使用 AdapterList，您可以使用我可以分享一个更复杂的（真实案例场景使用）：

您的 List<Any> 必须是 "compose aware"，当前可用的是 ModelList<Any>
您可以使用 @Model 标记创建一个模型，因为它们会更改状态，并且您的 @Compososable 函数将知道（使用 MutableList）

示例代码：

fun addLogic(modelList: ModelList<MyModel>) {
  modelList.add(MyModel("Smith John", 10))
}

class MyModel(var name: String, var index: Int)

@Composable
fun RecycledList() { // Any name you want
  val modelList<MyModel> = modelListOf()
  var counter = 0

  addLogic(modelList)

  modelList.add(MyModel("John Doe", 99))

  MaterialTheme {
    Column {
      Container(height = 70.dp) {
         Align(alignment = Alignment.Center) {
            Button(onClick = { 
               modelList.add(MyModel("John Smith", counter++))
               // Any other logic you want
            }) {
               Text("ADD ITEM")
            }
         }
      }
      AdapterList(data = modelList) { item ->
         Center {
            Text("Hello ${item.name} - Index: ${item.index}")
         }
      },
    }
  }
}

结果：

Answer 5

这是使用 AdapterList 在 compose 中实现 recyclerview 的示例代码

@Composable
fun Feeds(feeds:LiveData<List<Feed>>) {
    val mFeeds by feeds.observeAsState(emptyList())
    AdapterList(data = feeds){feed->
    FeedsItem(feed)
    }
}

Answer 6

新来者的进一步更新。从 0.1.0-dev14 开始，AdapterList 已弃用，取而代之的是 LazyColumnItems 和 LazyRowItems.

Answer 7

2021 年 3 月更新：从 1.0.0-beta01

开始

LazyColumn 垂直列表
LazyRow 水平列表

例如：

@Composable
fun LazyRowItemsDemo() {
    LazyRow {
        items((1..1000).toList()) {
            Text(text = "Item $it")
        }
    }
}

如何在 Compose Jetpack 中创建回收站视图？

How to create recycler view in Compose Jetpack?

android

android-recyclerview

android-jetpack-compose

android-compose-lazyfor

android-jetpack-compose-list