New Compose Multiplatform components arrived on Composables UICheck it out →

Modifier in Compose Ui

drawWithCache

Common

Draw into a [DrawScope] with content that is persisted across draw calls as long as the size of the drawing area is the same or any state objects that are read have not changed. In the event that the drawing area changes, or the underlying state values that are being read change, this method is invoked again to recreate objects to be used during drawing

For example, a [androidx.compose.ui.graphics.LinearGradient] that is to occupy the full bounds of the drawing area can be created once the size has been defined and referenced for subsequent draw calls without having to re-allocate.

Last updated:

Installation

dependencies {
   implementation("androidx.compose.ui:ui:1.7.0-beta04")
}

Overloads


fun Modifier.drawWithCache(
    onBuildDrawCache: CacheDrawScope.() -> DrawResult
)

Code Examples

DrawWithCacheModifierSample

@Composable
@Sampled
fun DrawWithCacheModifierSample() {
    Box(
        Modifier.drawWithCache {
            val gradient = Brush.linearGradient(
                colors = listOf(Color.Red, Color.Blue),
                start = Offset.Zero,
                end = Offset(size.width, size.height)
            )
            onDrawBehind {
                drawRect(gradient)
            }
        }
    )
}

DrawWithCacheModifierStateParameterSample

@Composable
@Sampled
fun DrawWithCacheModifierStateParameterSample() {
    val colors1 = listOf(Color.Red, Color.Blue)
    val colors2 = listOf(Color.Yellow, Color.Green)
    var toggle by remember { mutableStateOf(true) }
    Box(
        Modifier.clickable { toggle = !toggle }.drawWithCache {
            val gradient = Brush.linearGradient(
                colors = if (toggle) colors1 else colors2,
                start = Offset.Zero,
                end = Offset(size.width, size.height)
            )
            onDrawBehind {
                drawRect(gradient)
            }
        }
    )
}

DrawWithCacheContentSample

@Composable
@Sampled
fun DrawWithCacheContentSample() {
    val vectorPainter = rememberVectorPainter(24.dp, 24.dp, autoMirror = true) {
            viewportWidth, viewportHeight ->
        Path(
            pathData = PathData {
                lineTo(viewportWidth, 0f)
                lineTo(0f, viewportHeight)
                close()
            },
            fill = SolidColor(Color.Black)
        )
    }
    Image(
        painter = vectorPainter,
        contentDescription = null,
        modifier = Modifier.requiredSize(120.dp).drawWithCache {
            val gradient = Brush.linearGradient(
                colors = listOf(Color.Red, Color.Blue),
                start = Offset.Zero,
                end = Offset(0f, size.height)
            )
            onDrawWithContent {
                drawContent()
                drawRect(gradient, blendMode = BlendMode.Plus)
            }
        }
    )
}