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.