Skip to main content

Building Lists

In this section, you'll learn how to build a list of items of the PostStyledKComponent that was created previously. You'll be using the Lazy Collections API for this - refer to the Building List page for more info.

Component with a lazy list​

As we defined the simple Post class to hold information regarding an item that's in turn passed to PostStyledKComponent, we will initialize our component with lazy collections with a List<Post>.

Adding children​

The list of our data models of Post can be mapped to create children for our LazyList as seen in below.

class UserFeedKComponent(private val posts: List<Post>) : KComponent() {
  override fun ComponentScope.render(): Component {

    return LazyList {
      posts.forEach { post ->
        child(id = post.id, component = PostWithActionsKComponent(post = post))
      }
    }
  }
}

You can see the implemented behaviour in the video clip below. Notice how the heart icon persists the state even when the item is scrolled out.

Key Points​

  • LazyList - For items to be arranged as a sequential list.
  • child() - To add children to the lazy list.