1
resposta

Outro jeito de fazer:

Olá! Tive uma abordagem diferente na solução do problema que foi a seguinte:

1- Criei um function separada (coloquei na pasta extensions uma vez que julgo que ela pode ser reutilizada em outro momento caso queira). O codigo aparece um pouco difente pq esotu usando uma versao mais recente do Materials*
FICOU ASSIM:

package com.app.portosmile.extensions

import androidx.compose.animation.animateContentSize
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.material.ripple.rememberRipple
import androidx.compose.material3.LocalContentColor
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.style.TextOverflow

@Composable
fun TextoExpandido(
    texto: String,
    modifier: Modifier = Modifier,
    collapsedMaxLines: Int = 2,) {
    var expanded by remember { mutableStateOf(false) }

    val rippleIndication = rememberRipple(
        bounded = true,
        color = LocalContentColor.current // Pega a cor do conteúdo M3
    )

    Text(
        text = texto,
        maxLines = if (expanded) Int.MAX_VALUE else collapsedMaxLines,
        overflow = TextOverflow.Ellipsis,
        modifier = modifier
            .animateContentSize()
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = rippleIndication // Força o uso do Indication (Ripple) do M3
            ) {
                expanded = !expanded
            }
    )
}

e na sequencia, apenas adaptei o CardProductItem para usar a fun:

package com.app.portosmile.components

imorts**

@Composable
fun CardProductItem(
    product: Produto,
    modifier: Modifier = Modifier,
    elevation: Dp = 4.dp
) {
    Card(
        modifier
            .fillMaxWidth()
            .heightIn(150.dp),
        elevation = CardDefaults.cardElevation(
            defaultElevation = elevation
        )
    ) {
        Column {
            AsyncImage(
                model = product.image,
                contentDescription = "Imagem do produto ${product.nome}",
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp),
                placeholder = painterResource(id = R.drawable.placeholder),
                contentScale = ContentScale.Crop
            )
            Column(
                modifier = Modifier
                    .fillMaxWidth()
                    .background(Indigo400Light)
                    .padding(16.dp)
            ) {
                Text(
                    text = product.nome,
                    style = MaterialTheme.typography.titleMedium
                )
                Text(
                    text = product.preco.toBrazilianCurrency(),
                    style = MaterialTheme.typography.bodySmall
                )
            }
//Aqui usei a fun**
            product.description?.let { descricao ->
                TextoExpandido(
                    texto = descricao,
                    modifier = Modifier.padding(start = 16.dp, end = 16.dp, bottom = 16.dp)
                )
            }

        }
    }
}

a abordagem aplica o resultado esperado. mas foi a melhor escolha? fico na duvida uma vez que este conteúdo nao foi abordado nas aulas anteriores ou se metodo feito no comit do instrutor é mais pratico e melhor.

1 resposta

Olá, Paulo, tudo bem?

Sua abordagem foi excelente e muito pertinente!

Você aplicou ótimas práticas de desenvolvimento:

Separar o TextoExpandido facilita a manutenção e permite o reuso do código em outras partes do app. O uso do animateContentSize torna a interação muito mais agradável visualmente do que a troca brusca de estado.

O código do instrutor é feito de maneira mais didáticas, para focar no conceito de Estado sem adicionar a complexidade de criar novos arquivos ou animações naquele momento. Para o "mundo real", sua solução é, sem dúvida, muito boa.

Conte sempre com a Alura para evoluir seus estudos. Em caso de dúvidas estamos à disposição.

Bons estudos!

Sucesso

Imagem da comunidade