Jetpack Compose：如何将ic_remove_selected_photo图标置于Box布局内的图片右上角

Got it, let's fix this so your remove icon sits perfectly on top of the image. Here's what's going wrong with your current code and how to adjust it:

First, your existing code has a sizing mismatch: the Box has padding that makes its content area smaller than the Image you're placing inside, so the IconButton is aligned to the Box's padded area instead of the image's actual corner. Plus, the IconButton is way too small (10dp) to be usable for touch interactions.

Here's the corrected code that addresses these issues:

Box(modifier = Modifier.size(90.dp).padding(7.dp)) {
    Image(
        bitmap = bitmap.asImageBitmap(),
        modifier = Modifier
            .fillMaxSize()
            .clip(RoundedCornerShape(6.dp)),
        contentScale = ContentScale.Crop,
        contentDescription = "Selected photo" // Critical for accessibility
    )
    IconButton(
        onClick = { /* Add your remove photo logic here */ },
        modifier = Modifier
            .align(Alignment.TopEnd)
            .size(48.dp) // Usable touch target size (Android recommends min 48dp)
            .offset(x = 8.dp, y = (-8).dp) // Shifts icon to overlap image's corner
    ) {
        Icon(
            painter = painterResource(id = R.drawable.ic_remove_selected_photo),
            contentDescription = "Remove selected photo",
            modifier = Modifier.size(24.dp), // Visible icon size
            tint = Color.White // Makes icon stand out against images
        )
    }
}

Key Changes Explained: #

• Image Sizing: Replaced size(80.dp) with fillMaxSize() so the image fills the entire content area of the Box (which is 76dp wide/tall after padding). This ensures the IconButton's TopEnd alignment matches the image's actual top-right corner.
• Touch Target: Increased the IconButton size to 48dp to meet accessibility standards—users can actually tap it now! The icon inside is set to 24dp for visibility.
• Offset Adjustment: The offset modifier shifts the icon slightly outside the Box's padding, making it sit exactly at the image's corner (tweak the x and y values if you need to adjust the position).
• Accessibility: Added contentDescription to both the Image and Icon—this helps screen reader users understand what each element does.
• Icon Visibility: The tint ensures the remove icon is easy to see against different image backgrounds (change this color to match your app's design).

内容的提问来源于stack exchange，提问作者Wafi_ck