Pular para conteúdo

Card

Cards também são bastante importantes e nessa seção vamos ver um pouco sobre eles. Assim como outros components que já vimos, Card tem diversas variações. Veja uma implementação básica:

@Composable
private fun Card() {
    Card(shape = RoundedCornerShape(16.dp)) {
        Image(
            painter = painterResource(id = R.drawable.img_nature),
            contentDescription = "Image",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(200.dp)
        )
        Column(modifier = Modifier.padding(16.dp)) {
            Text(
                text = "Nature image",
                color = Color.Black,
                fontSize = 16.sp
            )
            Text(
                text = "1.2 MB",
                fontSize = 12.sp,
            )
        }
    }
}

Card

Um ElevatedCard, que como o nome diz, possui uma elevação e shadow de acordo com a elevação:

@Composable
private fun Card() {
    ElevatedCard(
        shape = RoundedCornerShape(16.dp),
        elevation = CardDefaults.cardElevation(
            defaultElevation = 12.dp
        ),
        colors = CardDefaults.cardColors(
            containerColor = Color.White
        )
    ) {
        ...
    }
}

ElevatedCard

E também temos o OutlinedCard:

@Composable
private fun Card() {
    OutlinedCard(
        shape = RoundedCornerShape(16.dp),
        border = BorderStroke(1.dp, Color.Black)
    ) {
        ...
    }
}

OutlinedCard

🔗 Conteúdos auxiliares: