Skip to main content

Building Lists

note

🚧   THIS PAGE IS UNDER CONSTRUCTION

For now, see our guide to using Sections starting here for an overview of how to build lists in Litho with the Sections API.

Simple Lists

Simple component with vertical list:

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))
}
}
}
}

Nested Lists

Let's add Instagram-like stories to your feed.

With the following Story component:

class StoryKComponent(private val user: User) : KComponent() {
override fun ComponentScope.render(): Component {
return Column(
alignItems = YogaAlign.CENTER,
style =
Style.padding(all = 4.dp).onClick {
Toast.makeText(
context.androidContext, "Open ${user.username} Story", Toast.LENGTH_SHORT)
.show()
}) {
child(Image(drawable = drawableRes(user.avatarRes), style = Style.width(72.dp).height(72.dp)))
child(Text(text = user.username, textSize = 10.sp))
}
}
}

Example of nested horizontal list inside a vertical list:

class UserFeedWithStoriesKComponent(
private val posts: List<Post>,
private val usersWithStories: List<User>
) : KComponent() {
override fun ComponentScope.render(): Component {
return LazyList {
child(
LazyList(
orientation = HORIZONTAL,
crossAxisWrapMode = CrossAxisWrapMode.MatchFirstChild,
startPadding = 4.dp,
topPadding = 4.dp,
style = Style.padding(vertical = 6.dp)) {
usersWithStories.forEach { user -> child(StoryKComponent(user = user)) }
})

child(Row(style = Style.height(1.px).backgroundColor(0x22888888)))

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