使用 Jetpack Compose 完成自定义绘制

关注微信公众号：Jetpack Compose 博物馆，加入Compose中文技术社区获取更多优质技术教程！

目前有一个正在进行的 Jetpack Compose中文手册 项目，旨在帮助开发者更好的理解和掌握Compose框架，目前仍还在开荒中，欢迎大家进行关注与加入！ 这篇文章由本人撰写，目前已经发布到该手册中，欢迎进行查阅。

概述

Jetpack Compose 作为一款 UI 框架，自定义绘制部分是必不可少的。通过官方所提供的基础 API， 允许开发者实现各种场景下的绘制定制需求。如果你对 Android 原生 Canvas 已经了如指掌的话，那么迁移至 Jetpack Compose 基本没有任何成本。即使你不曾了解 Android 原生 Canvas 也不要担心，阅读这篇文章你同样也可以掌握如何在 Jetpack Compose 完成自定义绘制。

从 Canvas Composable 开始

Canvas Composable 是官方提供的一个专门用来自定义绘制的独立组件，这个组件不包含任何子元素，类似于传统View系统中的一个独立View（不是ViewGroup，不包含子View）。作为一个”独立View“，我们同样也可以通过 Layout Modifier 来定制测量布局过程，有关于测量布局的定制可以拓展阅读 自定义Layout 。

Canvas参数有两个参数, 类型分别是 Modifier 与 DrawScope.() -> Unit。Modifier 作为该组件的修饰符不难理解， DrawScope.() -> Unit 是一个 reciever 为 DrawScope 类型的 lambda。那么我们就可以在 lambda 中任意使用 DrawScope 为我们所提供的 API 了。

fun Canvas(modifier: Modifier, onDraw: DrawScope.() -> Unit)
复制代码

我们来看看 DrawScope 为我们限定了哪些 API。这些 API 字面意思很好理解，在使用时临时查找即可。

简单示例

让我们画一个简单的圆环作为示例。

@Preview
@Composable
fun DrawColorRing() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        var radius = 300.dp
        var ringWidth = 30.dp
        Canvas(modifier = Modifier.size(radius)) {
            this.drawCircle( // 画圆
                brush = Brush.sweepGradient(listOf(Color.Red, Color.Green, Color.Red), Offset(radius.toPx() / 2f, radius.toPx() / 2f)),
                radius = radius.toPx() / 2f,
                style = Stroke(
                    width = ringWidth.toPx()
                )
            )
        }
    }
}
复制代码