Início / coding / Perguntas / 79209052
Accepted
Oleksii Shtanko
Asked: 2024-11-21 05:43:43 +0800 CST

Como alinhar itens em uma grade vertical de 2 colunas pelo item mais alto no Jetpack Compose?

  • 772

Estou trabalhando com uma grade vertical de 2 colunas no Jetpack Compose. Cada célula pode conter um conjunto complexo de composables (consulte DynamicGridCell abaixo). No entanto, a altura de cada célula é definida como wrapContent.

Meu objetivo é alinhar itens em cada linha pela altura do item mais alto dentro daquela linha. Em outras palavras, todas as células em uma linha devem ter a mesma altura, correspondendo à célula mais alta naquela linha.

Um exemplo visual do problema, destaquei o resultado que preciso alcançar:

Exemplo do problema

Exemplo de código Aqui está um exemplo para ilustrar a configuração:

@Composable
fun DynamicLazyGridScreen(modifier: Modifier = Modifier) {
    DynamicLazyGrid(elements = items, modifier = modifier)
}

@Composable
fun DynamicLazyGrid(elements: List<Item>, modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        items(elements) {
            DynamicGridCell(it, modifier = Modifier)
        }
    }
}

@Composable
private fun DynamicGridCell(item: Item, modifier: Modifier = Modifier) {
    Card(
        modifier = Modifier.height(IntrinsicSize.Max)
    ) {
        Column(
            modifier = modifier.heightIn(min = 300.dp, max = Dp.Infinity)
        ) {

            Box(
                modifier = Modifier
                    .height(100.dp)
                    .fillMaxWidth()
                    .background(color = Color.Green),
            )

            Spacer(modifier = Modifier.height(4.dp))

            Text(
                text = item.title,
                modifier = Modifier
            )

            Spacer(modifier = Modifier.height(4.dp))

            Text(
                text = item.description,
                modifier = Modifier
                    .padding(8.dp)
                    .fillMaxHeight()
            )
        }
    }
}

val items = List(50) { i ->
    Item(
        title = "Title ${i + 1}",
        description = "${generateRandomString()} ${i + 1}",
    )
}

fun generateRandomString(): String {
    val length = Random.nextInt(5, 300)
    val chars = ('a'..'z') + ('A'..'Z') + ('0'..'9') // Characters to choose from
    return (1..length)
        .map { chars.random() }
        .joinToString("")
}

data class Item(
    val title: String,
    val description: String,
)

Atualização: Esta pergunta não é semelhante a Como nivelar a altura dos itens no LazyVerticalGrid? porque, no meu caso, tenho uma célula mais complexa, não apenas uma imagem com um texto.

2 respostas

  1. Best Answer

    Esta é a melhor maneira de fazer isso, na minha opinião, sem precisar medir depois e fazer recomposições, etc., etc. Assim, você pode definir a opacidade da célula adjacente como 0f, dessa forma você terá a mesma altura em cada linha ;)

    O código:

    @Composable
fun DynamicLazyGridScreen(modifier: Modifier = Modifier) {
    DynamicLazyGrid(items, modifier)
}

@Composable
fun DynamicLazyGrid(elements: List<Item>, modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp)
    ) {
        itemsIndexed(elements) { index, item ->
            val backItem = when {
                index == 0 -> elements[index + 1]
                index == elements.size - 1 -> elements[index - 1]
                index % 2 == 0 -> elements[index + 1]
                else -> elements[index - 1]
            }

            DynamicGridCell(
                frontItem = item,
                backItem = backItem,
                modifier = Modifier
            )
        }
    }
}

@Composable
private fun DynamicGridCell(
    modifier: Modifier = Modifier,
    frontItem: Item,
    backItem: Item
) {
    Card(modifier = Modifier.height(IntrinsicSize.Max)) {
        Box {
            StrangeItem(modifier.alpha(0f), backItem)
            StrangeItem(modifier.alpha(1f), frontItem)
        }
    }
}

@Composable
private fun StrangeItem(modifier: Modifier, item: Item) {
    Column(
        modifier = modifier.heightIn(min = 300.dp)
    ) {
        Box(
            modifier = Modifier
                .height(100.dp)
                .fillMaxWidth()
                .background(Color.Green)
        )
        Spacer(modifier = Modifier.height(4.dp))
        Text(text = item.title)
        Spacer(modifier = Modifier.height(4.dp))
        Text(
            text = item.description,
            modifier = Modifier
                .padding(8.dp)
                .fillMaxHeight()
        )
    }
}

val items = List(50) { index ->
    Item(
        title = "Title ${index + 1}",
        description = "${generateRandomString()} ${index + 1}"
    )
}

fun generateRandomString(): String {
    val length = Random.nextInt(5, 300)
    val chars = ('a'..'z') + ('A'..'Z') + ('0'..'9')
    return List(length) { chars.random() }.joinToString("")
}

data class Item(
    val title: String,
    val description: String
)

    O resultado: insira a descrição da imagem aqui

    • 1

  2. acho que você precisa desta função measureCellHeight()

    você pode verificar este código:

      @Composable
fun DynamicLazyGrid(elements: List<Item>, modifier: Modifier = Modifier) {
    LazyVerticalGrid(
        columns = GridCells.Fixed(2),
        modifier = modifier.fillMaxSize(),
        contentPadding = PaddingValues(8.dp),
        verticalArrangement = Arrangement.spacedBy(8.dp),
        horizontalArrangement = Arrangement.spacedBy(8.dp),
    ) {
        items(elements.chunked(2)) { rowItems ->
            Row(
                modifier = Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.spacedBy(8.dp)
            ) {
                val rowHeights = rowItems.map { measureCellHeight(it) }
                val maxHeight = rowHeights.maxOrNull() ?: 0.dp
                rowItems.forEach { item ->
                    DynamicGridCell(
                        item = item,
                        maxHeight = maxHeight,
                        modifier = Modifier.weight(1f)
                    )
                }
            }
          }
      }
  }


@Composable
private fun DynamicGridCell(item: Item, maxHeight: Dp, modifier: Modifier = Modifier) {
    Card(
        modifier = modifier
            .fillMaxWidth()
            .height(maxHeight)
    ) {
        Column(
            modifier = Modifier.fillMaxHeight()
        ) {
            Box(
                modifier = Modifier
                    .height(100.dp)
                    .fillMaxWidth()
                    .background(color = Color.Green),
            )

            Spacer(modifier = Modifier.height(4.dp))

            Text(
                text = item.title,
                modifier = Modifier.padding(8.dp)
            )

            Spacer(modifier = Modifier.height(4.dp))

            Text(
                text = item.description,
                modifier = Modifier
                    .padding(8.dp)
                    .fillMaxHeight()
            )
        }
    }
}

@Composable
private fun measureCellHeight(item: Item): Dp {
    var measuredHeight by remember { mutableStateOf(0.dp) }
    Box(
        modifier = Modifier.onGloballyPositioned { coordinates ->
            measuredHeight = coordinates.size.height.toDp()
        }
    ) {
        DynamicGridCell(item = item, maxHeight = Dp.Infinity)
    }
    return measuredHeight
}
    • 0

relate perguntas