Hi I’m working with a SubcomposeLayout. The title ...

# compose

[Nicolai]

Hi I’m working with a SubcomposeLayout. The title and description are all different so in order to keep it more aligned I want the column for title and description to have the same height based on the highest one but the height returned is the same for all of the placeables. Can someone tell me what I’m doing wrong?
Code in thread 🧵

[Nicolai]

@Composable
fun RewardCards(rewards: List<Reward>) {

    val density = LocalDensity.current
    SubcomposeLayout { constraints ->
        val columnHeight = subcompose("box") {
            rewards.forEach { reward ->
                    Column(
                        modifier = Modifier.fillMaxWidth()
                            .wrapContentHeight()
                    ) {
                        Text(
                            text = reward.title,
                            fontSize = 16.sp,
                            fontWeight = FontWeight.Bold
                        )
                        Text(
                            text = reward.description,
                            fontSize = 14.sp,
                            color = Color.Gray
                        )
                    }

            }
        }.map { it.measure(constraints) }

        columnHeight.forEach { placeable ->
            Timber.v("Box height: ${placeable.height}")
        }

        // Measure all the placeables with the given constraints.
        val maxHeightPx = columnHeight.maxOfOrNull { it.height } ?: 0
        val maxHeightDp = with(density) {
            maxHeightPx.toDp()
        }
            val mainPlaceable = subcompose("rewards") {
                LazyVerticalGrid(
                    columns = GridCells.Fixed(2),
                    contentPadding = PaddingValues(horizontal = 0.dp, vertical = 16.dp),
                    verticalArrangement = Arrangement.spacedBy(8.dp),
                    horizontalArrangement = Arrangement.spacedBy(8.dp)
                ) {
                    rewards.forEach { reward ->
                        item {
                            Card(
                                elevation = CardDefaults.cardElevation(4.dp),
                                modifier = Modifier
                                    .fillMaxWidth()
                                    .wrapContentHeight()
                            ) {
                                Column(
                                    modifier = Modifier.padding(16.dp)
                                ) {
                                    Column(
                                        modifier = Modifier.height(maxHeightDp)
                                    ) {
                                        Text(
                                            text = reward.title,
                                            fontSize = 16.sp,
                                            fontWeight = FontWeight.Bold
                                        )
                                        Text(
                                            text = reward.description,
                                            fontSize = 14.sp,
                                            color = Color.Gray
                                        )
                                    }
                                    AsyncImage(
                                        model = reward.imageUrl,
                                        contentDescription = "Reward Image",
                                        modifier = Modifier
                                            .fillMaxWidth()
                                            .height(150.dp)
                                            .clip(RoundedCornerShape(16.dp)),
                                        contentScale = ContentScale.Crop
                                    )
                                    Spacer(modifier = Modifier.height(8.dp))
                                    Text(
                                        text = "${reward.cost} point",
                                        fontSize = 14.sp,
                                        fontWeight = FontWeight.Bold
                                    )
                                }
                            }
                        }
                    }
                }
            }

            val mainMeasureable = mainPlaceable.map { it.measure(constraints) }

            layout(constraints.maxWidth, constraints.maxHeight)
            {
                mainMeasureable.forEach { placeable ->
                    placeable.placeRelative(0, 0)
                }
            }
        }
    }

    @Composable
    @Preview
    private fun RewardCardsPreview() {
        MaterialTheme {
            Box(Modifier.fillMaxSize()) {
                RewardCards(exampleRewards)
            }
        }
    }

    val exampleRewards = listOf(
        Reward(
            title = "Gratis pizza slide",
            description = "Få en lækker pizza slide ",
            cost = 2500,
            imageUrl = "<https://www.madformadelskere.dk/wp-content/uploads/2021/08/Pepperoni-pizza-500x375.jpg>"
        ),
        Reward(
            title = "Gratis pommes fritter",
            description = "Nyd sprøde pommes fritter",
            cost = 5000,
            imageUrl = "<https://gastrofun.dk/wp-content/uploads/2021/09/Pommes-frites-i-ovn1-7-500x500.jpg>"
        ),
        Reward(
            title = "Gratis sodavand",
            description = "Slå tørsten med en forfriskende sodavand",
            cost = 7500,
            imageUrl = "<https://www.webstaurantstore.com/images/products/large/473860/1928124.jpg>"
        ),
        Reward(
            title = "Gratis burger",
            description = "Forkæl dig selv med en lækker burger",
            cost = 10000,
            imageUrl = "<https://mambeno.dk/wp-content/uploads/2021/08/Big-tasty-med-bacon-scaled.jpg>"
        ),
        Reward(
            title = "Gratis dessert",
            description = "Afslut dit måltid med en sød dessert",
            cost = 5000,
            imageUrl = "<https://nutricia.com.au/fortisip/wp-content/uploads/sites/8/2020/09/Forticreme-Chocolate-Chocolate-Layered-Dessert-1-scaled.jpeg>"
        ),
        Reward(
            title = "Gratis kaffe",
            description = "Start dagen med en varm kop kaffe",
            cost = 2000,
            imageUrl = "<https://taenk.dk/sites/default/files/styles/medium/public/2022-06/kaffe-derfor-skal-du-undgaa-akrylamid_1.jpg?h=29234840&itok=8gUBVmOw>"
        ),
        Reward(
            title = "Gratis salat",
            description = "Nyd en frisk og sund salat",
            cost = 3000,
            imageUrl = "<https://www.valdemarsro.dk/wp-content/2023/05/cobb-salat.jpg>"
        ),
        Reward(
            title = "Gratis is",
            description = "Køl ned med en lækker is",
            cost = 4000,
            imageUrl = "<https://farm3.staticflickr.com/2947/15422160935_da09a5dfc4_b.jpg>"
        )
    )

[Nicolai]

This is how I would expect it to look more or less: