如何在android撰写卡的一角创建一个图标

Question

我想创建类似于下面示例的东西。

为此，请使用 android compose。

Answer 1

您可以在右上角设置按钮的切换按钮，然后将按钮放在图像上并在右上角对齐

@Composable
fun FavoriteButton(
    modifier: Modifier = Modifier,
    color: Color = Color.White
) {

    var isFavorite by remember { mutableStateOf(false) }

    IconToggleButton(
        checked = isFavorite,
        onCheckedChange = {
            isFavorite = !isFavorite
        }
    ) {
        Icon(
            tint = color,
         
            imageVector = if (isFavorite) {
                Icons.Filled.Favorite
            } else {
                Icons.Default.FavoriteBorder
            },
            contentDescription = null
        )
    }

}

@Composable
fun MyComponent(
    imageUrl:String,
    modifier: Modifier = Modifier,
) {
    Box(contentAlignment = Alignment.TopEnd) {

        Image(
            contentScale = ContentScale.None,
            modifier = modifier,
            painter = rememberImagePainter(data = imageUrl),
            contentDescription = null
        )
        
        FavoriteButton(modifier = Modifier.padding(12.dp))

    }
}

rememberImagePainter需要 Coil 作为依赖项 implementation("io.coil-kt:coil-compose:x.x.x")

如果您认为最喜欢的按钮比所需的小，您可以使用

    modifier = modifier.graphicsLayer {
        scaleX = 1.3f
        scaleY = 1.3f
    }

图标上有更大的心形

如果你想要按钮后面的形状，你可以将它包裹在Surface

Surface(
    shape = CircleShape,
    modifier = Modifier
        .padding(6.dp)
        .size(32.dp),
    color = Color(0x77000000)
) {
    FavoriteButton(modifier = Modifier.padding(8.dp))
}