Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

305
Visualizações
How to level the height of items in LazyVerticalGrid?

I'm using LazyVerticalGrid to display list of items.

LazyVerticalGrid(
            cells = GridCells.Fixed(2),
            modifier = Modifier.fillMaxSize(),
            state = listState,
            content = {
                    Box(modifier = boxModifier) {
                        ProductItemView(
                            item = items[index]
                        )
                    }
                }
            }
        )

Sometimes some of my items are higher than the items next to them (attachemnt) enter image description here

How can I adjust the height of the all items? Or should I use something other than VerticalGrid()?

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

What's happening is which ever item has text larger than one line, it expands

To keep a uniform height, you have to set a minimum height to every child Box, to do so, you can use the Modifier as below.

//Adjust 200.dp as your requirement
Box(modifier = Modifier.height(200.dp))

This way, every box will have same height irrespective of the length/size of the content.

over 4 years ago · Santiago Trujillo Relatório

0

If you give a fixed height to your Composables you might end up Composables that don't display some part of your child composables, in your case it might be Text composable.

First and easy way is to set a minimum height Modifier.heightIn(min = 200.dp), this might leave space below or above your composable depending on your Box alignment, and if your Composables are taller than 200.dp it will have the same effect you have now, so it's not or adding any fixed height is not enough.

Better way is to use onTextLayout to get Text's line count and height to add smaller number of lines as padding as

@Composable
fun GridSnackCardWithTitle(
    modifier: Modifier = Modifier,
    snack: Snack,
) {
    Column(
        modifier = modifier
            .heightIn(min = 200.dp)
            .shadow(1.dp, shape = RoundedCornerShape(5.dp))
            .background(Color.White),

        ) {

        val density = LocalDensity.current.density

        Image(
            contentScale = ContentScale.None,
            modifier = Modifier
                .fillMaxWidth()
                .aspectRatio(1f)
                .clip(RoundedCornerShape(8.dp))
                .clickable { },
            painter = rememberImagePainter(
                data = snack.imageUrl,
                builder = {
                    placeholder(drawableResId = R.drawable.placeholder)
                }
            ),
            contentDescription = null
        )

        Spacer(modifier = Modifier.height(4.dp))
        var padding by remember { mutableStateOf(0.dp) }
        Text(
            modifier = Modifier.padding(start = 4.dp, end = 4.dp, bottom = padding),
            text = "Snack ${snack.name}",
            fontSize = 20.sp,
            onTextLayout = {
                val lineCount = it.lineCount
                val height = (it.size.height / density).dp

                println("lineCount: $lineCount, Height: $height")
                padding = if (lineCount > 1) 0.dp else height
            }
        )
        
    }
}

Result

enter image description here

over 4 years ago · Santiago Trujillo Relatório

0

Usually such problem is solved by adding Modifier.fillMaxHeight to containing items, and Modifier.height(IntrinsicSize.Max) to the container.

The problem is that in this case we don't have access to the container Modifier: in Compose 1.1.* there's a Row in the source code, but we cannot pass our modifier down to it, and in 1.2.* there's no Row at all.

I think such a request is fair, but for now you can do it yourself in LazyColumn:

val columnsCount = 2
val itemsCount = 10
LazyColumn(
    modifier = Modifier.fillMaxSize()
) {
    items((itemsCount + 1) / columnsCount) { i ->
        Row(Modifier.height(IntrinsicSize.Max)) {
            for (j in 0 until columnsCount) {
                val index = i * columnsCount + j
                if (index < itemsCount) {
                    Text(
                        LoremIpsum(index).values.first(),
                        modifier = Modifier
                            .fillMaxHeight()
                            .weight(1f)
                            .background(
                                when (index % 3) {
                                    0 -> Color.LightGray
                                    1 -> Color.DarkGray
                                    else -> Color.Gray
                                }
                            )
                    )
                } else {
                    Spacer(Modifier.weight(1f))
                }
            }
        }
    }
}
over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda