Essa funcionalidade já havia sido implementada no desafio de um curso anterior. Acredito que não vá fazer diferença manter como ja estava, mas acho melhor perguntar só por garantia.
@Composable
fun CardProductItem(
product: Product,
modifier: Modifier = Modifier,
elevation: Dp = 4.dp,
expanded:Boolean = false
) {
var expandedState by remember {
mutableStateOf(expanded)
}
Card(
modifier = modifier
.fillMaxWidth()
.heightIn(150.dp)
.clickable {
expandedState = !expandedState
},
elevation = CardDefaults.cardElevation(defaultElevation = elevation)
) {
Column {
AsyncImage(
model = product.image,
contentDescription = null,
Modifier
.fillMaxWidth()
.height(100.dp),
placeholder = painterResource(id = R.drawable.placeholder),
contentScale = ContentScale.Crop
)
Column(
Modifier
.fillMaxWidth()
.background(Indigo400Light)
.padding(16.dp)
) {
Text(
text = product.name
)
Text(
text = product.price.toCurrency()
)
}
product.description?.let {
val textOverflow = if (expandedState) TextOverflow.Visible else TextOverflow.Ellipsis
val maxLines = if(expandedState) Int.MAX_VALUE else 2
Text(
text = product.description,
Modifier
.padding(16.dp),
maxLines = maxLines,
overflow = textOverflow
)
}
}
}
}
@Preview
@Composable
private fun CardProductItemPreview() {
AluveryTheme {
Surface {
CardProductItem(
product = Product(
name = "Refrigerante",
price = BigDecimal("4.99"),
image = "https://images.pexels.com/photos/2775860/pexels-photo-2775860.jpeg"
),
)
}
}
}
@Preview(showBackground = true)
@Composable
private fun CardProductItemWithDescriptionPreview() {
AluveryTheme {
Surface {
CardProductItem(
product = Product(
name = "Refrigerante",
price = BigDecimal("4.99"),
image = "https://images.pexels.com/photos/2775860/pexels-photo-2775860.jpeg",
description = LoremIpsum(50).values.first()
),
)
}
}
}