Как создать вид утилизатора в Compose Jetpack?

Question

Есть ли какой-нибудь особый способ создания recyclerView в Compose Jetpack? Или это так же, как обычно?

Answer 1

В jetnews примере проекта для list/recyclerview они используют 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()
            }
        }
    }
} 

Для класса иметод проверить эту ссылку

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

Надеюсь, это полезно для вас.

Answer 2

Примеры из приложения JetNews содержат статические данные. Стоит отметить, что в соответствии с недавней презентацией Google (см. Особенно с 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 (или любой другой виджет по нашему выбору) на каждом шаге итерации, когда данные динамически передаются через лямбда-выражение.