显示图像 精选集

使用矢量、位图或直接在屏幕上使用画布进行绘制来处理屏幕上的图像。
Image(
    painter = painterResource(id = R.drawable.dog),
    contentDescription = stringResource(id = R.string.dog_content_description)
)
使用 Coil 或 Glide 从磁盘或互联网加载图像到您的应用。
指南 
@Composable
fun AnimatedVectorDrawable() {
    val image = AnimatedImageVector.animatedVectorResource(R.drawable.ic_hourglass_animated)
    var atEnd by remember { mutableStateOf(false) }
    Image(
        painter = rememberAnimatedVectorPainter(image, atEnd),
        contentDescription = "Timer",
        modifier = Modifier.clickable {
            atEnd = !atEnd
        },
        contentScale = ContentScale.Crop
    )
}
显示动画图像，用于加载动画和在用户操作后提供反馈的图标。
指南 
class OverlayImagePainter constructor(
    private val image: ImageBitmap,
    private val imageOverlay: ImageBitmap,
    private val srcOffset: IntOffset = IntOffset.Zero,
    private val srcSize: IntSize = IntSize(image.width, image.height),
    private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height)
) : Painter() {

    private val size: IntSize = validateSize(srcOffset, srcSize)
    override fun DrawScope.onDraw() {
        // Draw the first image without any blend mode.
        drawImage(
            image,
            srcOffset,
            srcSize,
            dstSize = IntSize(
                this@onDraw.size.width.roundToInt(),
                this@onDraw.size.height.roundToInt()
            )
        )

        drawImage(
            imageOverlay,
            srcOffset,
            overlaySize,
            dstSize = IntSize(
                this@onDraw.size.width.roundToInt(),
                this@onDraw.size.height.roundToInt()
            ),
            blendMode = BlendMode.Overlay
        )
    }

    // See the guide for all the code

}
混合或叠加源图像以显示分层图像。
指南 
val hexagon = remember {
    RoundedPolygon(
        6,
        rounding = CornerRounding(0.2f)
    )
}
val clip = remember(hexagon) {
    RoundedPolygonShape(polygon = hexagon)
}
Box(
    modifier = Modifier.fillMaxSize(),
    contentAlignment = Alignment.Center
) {
    Image(
        painter = painterResource(id = R.drawable.dog),
        contentDescription = "Dog",
        contentScale = ContentScale.Crop,
        modifier = Modifier
            .graphicsLayer {
                this.shadowElevation = 6.dp.toPx()
                this.shape = clip
                this.clip = true
                this.ambientShadowColor = Color.Black
                this.spotShadowColor = Color.Black
            }
            .size(200.dp)

    )
}
将图像裁剪成形状以自定义图像在应用中的显示方式。
指南

7 分钟

这 5 个快速简便的动画可以在几分钟内让您的应用栩栩如生。即使您没有时间学习动画的所有知识，也可以让您的 Compose 应用脱颖而出。

快速指南

9 分钟

在您熟悉 Compose 的操作后，您可能希望开始绘制您自己的自定义组件。此视频介绍了如何开始进行自定义绘图。

快速指南

5 分钟

了解如何使用转换动画状态值、动画可见性或大小更改以及使用 Compose 动画 API 进行简单的交叉淡入淡出。

快速指南

5 分钟

了解如何使用专门设计用于在画布上绘制文本的 Compose API。此部分显示了在圆角矩形中绘制表情符号字体的代码。

快速指南

在 Compose 中绘制文本

2 分钟

了解如何使用专门设计用于在画布上绘制文本的 Compose API。此部分显示了在圆角矩形中绘制表情符号字体的代码。

快速指南

有问题或反馈吗？

访问我们的常见问题页面，了解有关快速指南的信息，或与我们联系并告诉我们您的想法。
前往常见问题 留下反馈