Jetpack Compose Dynamic Spacer Height

Question

I'm using Jetpack Compose version 1.0.2 (latest stable as of today).

I have a Column of multiple LazyRows, which has an Image and two Text.

See the structure below (simplified)

val topicList: List<Topics>


Column {
    topicList.forEach { topic ->

        val showList: List<Show> = topic.shows

        Column {
            Text(text = topic.title)

            LazyRow {
                items(showList) { show ->
                    Column {
                        Image()
                        Text(text = show.title)
                        Text(text = show.info)
                    }
                }
            }

            Spacer(Modifier.height(32.dp))
        }
    }
}

The problem is the Text composables with show.title and show.info can be multiple lines, and as each item is lazy loaded, the height is not calculated until it shows up on the screen. As a result, the next row's y position jumps around.

To understand what's going on, please see this video: Video link

How can I dynamically calculate the Spacer's height so that they are not jumping? I know the easy solution would be just giving a fixed height, but some texts are just one liner and those will have bigger gaps so it's not really ideal for me I think.

Answer 1

To calculate the height of a LazyRow, you need to know all the dimensions of the elements. A straightforward solution would be to place them all under LazyRow using Box, in this case the size would be determined by the maximum of them.

But this solution requires a lot of resources, especially if you have a lot of objects. Instead, I suggest that you limit both info and title by the number of maximum lines, say 2 pieces, and calculate the maximum size given that both texts will have the maximum number of lines.

@Composable
fun TopicList(topicList: List<Topics>) {
    Column {
        topicList.forEach { topic ->
            val showList = topic.shows
            Column {
                Text(text = topic.title)
                Box {
                    ShowCell(
                        placeholderShow,
                        modifier = Modifier.alpha(0f)
                    )
                    LazyRow(
                        horizontalArrangement = Arrangement.spacedBy(10.dp)
                    ) {
                        items(showList) { show ->
                            ShowCell(show)
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun ShowCell(
    show: Show,
    modifier: Modifier = Modifier
) {
    Column(
        modifier
            .width(200.dp)
    ) {
        Image(
            painter = rememberImagePainter(show.image),
            contentDescription = "...",
            contentScale = ContentScale.Crop,
            modifier = Modifier.aspectRatio(2f)
        )
        Text(
            show.title,
            fontSize = 20.sp,
            maxLines = titleMaxLines,
            overflow = TextOverflow.Ellipsis,
        )
        Text(
            text = show.info,
            maxLines = infoMaxLines,
            overflow = TextOverflow.Ellipsis,
        )
    }
}

private const val titleMaxLines = 2
private const val infoMaxLines = 2
private val placeholderShow = Show(
    image = "",
    title = List(titleMaxLines) { '\n' }.joinToString(separator = ""),
    info = List(titleMaxLines) { '\n' }.joinToString(separator = ""),
)

Result: