使用 Jetpack Compose 和 Kotlin 自定义卡片形状

Question

你知道我如何用

Jetpack Compose

塑造这个吗？ 因为在存储库中对于小屏幕尺寸无法正常工作。

附图：

我想用

Jetpack Compose

为卡片创建这个自定义形状。 （附图中）

谢谢您的帮助！

Answer 1

fun BitcoinCard() {
    Box(
        modifier = Modifier
            .size(200.dp)
            .background(Color.Black, shape = RoundedCornerShape(24.dp))
            .padding(16.dp)
    ) {
        Column {
            // 
            Row(
                verticalAlignment = Alignment.CenterVertically
            ) {
                Text(
                    text = "-18 %",
                    color = Color.White,
                    fontSize = 14.sp
                )
                Icon(
                    imageVector = Icons.Default.TrendingUp,
                    contentDescription = null,
                    tint = Color.LightGray,
                    modifier = Modifier.size(16.dp)
                )
            }

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

            // 
            Text(
                text = "Bitcoin",
                color = Color.White,
                fontSize = 16.sp,
                fontWeight = FontWeight.Bold
            )

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

            // 
            Text(
                text = "3,689087",
                color = Color.White,
                fontSize = 28.sp,
                fontWeight = FontWeight.Bold
            )

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

            // 
            Text(
                text = "$98,160",
                color = Color.LightGray,
                fontSize = 14.sp
            )
        }

        //icon bitcoin in top right
        Box(
            modifier = Modifier
                .align(Alignment.TopEnd)
                .background(Color.White, shape = CircleShape)
                .padding(8.dp)
        ) {
            Icon(
                painter = painterResource(id = R.drawable.ic_bitcoin), // icon bitcoin
                contentDescription = null,
                tint = Color.Black,
                modifier = Modifier.size(16.dp)
            )
        }
    }
}