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

Question

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

Answer 1

2021 年 3 月更新：从1.0.0-beta01

• LazyColumn对于垂直列表
• LazyRow对于水平列表

例如：

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

Answer 2

JetNews 应用程序中的示例具有静态数据。值得一提的是，根据最近的 Google 演示文稿ScrollingList（特别是从 18:30 开始），我们应该考虑RecyclerView. 然后，它应该如下所示：

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

或者我们可以用LiveDataRxJava Observable/做类似的事情Flowable：

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

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

Answer 3

在jetnews示例项目中，list/recyclerview他们使用VerticalScrollerwithColumn和 usingforEach来填充以下@Composable功能的项目是示例

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

对于类和方法，请检查此链接

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

有关更多信息，您可以从检查这里的链接下载/克隆jetnews示例

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

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

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

1. LazyColumnFor用于垂直列表
2. LazyRowFor用于水平列表

希望对你有帮助。

Answer 4

新来者的进一步更新。从0.1.0-dev14 开始，AdapterList不推荐使用LazyColumnItems和LazyRowItems。

Answer 5

dev06 Jetpack Compose的更新和当前实现使用AdapterList，您可以使用Nurseyit Tursunkulov包含的简单示例，我可以分享一个更复杂的（真实案例场景使用）：

• 您List<Any>必须具备“撰写意识”，而当前可用的是ModelList<Any>
• @Model您可以使用标签创建模型，因为它们会更改状态，并且您的@Compososable函数将知道（使用 a 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 6

根据这篇文章有新版本：

@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 7

这是一个示例代码，它使用 AdapterList 在 compose 中实现 recyclerview

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