Jetpack Compose Academy · Lektion

drawWithCache und Performance

Vermeiden Sie, Zeichenobjekte in jedem Frame neu aufzubauen.

drawWithCache und Performance ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.

Drawing Runs Often

Your Canvas lambda can run on every frame. Rebuilding heavy objects there, frame after frame, quietly drags down performance.

The Costly Objects

Things like Path, Brush, and Paint are not free to create. Allocating them on each draw wastes work the GPU never needed.

Enter drawWithCache

The drawWithCache modifier lets you build expensive objects once and reuse them. It splits setup from the actual drawing step.

Modifier.drawWithCache {
    // build once here
    onDrawBehind { /* draw each frame */ }
}

Build Block Runs Rarely

Code in the cache block only re-runs when the size or your read state changes. Put your Path and Brush creation right here.

Modifier.drawWithCache {
    val brush = Brush.linearGradient(colors)
    onDrawBehind { drawRect(brush) }
}

onDrawBehind

Use onDrawBehind to paint underneath the Composable's content. It gives you a DrawScope that runs on each frame, cheaply.

onDrawBehind {
    drawCircle(color = Color.Blue)
}

onDrawWithContent

Need to mix your art with the actual UI? onDrawWithContent lets you draw, call drawContent, and draw again around it.

onDrawWithContent {
    drawContent()
    drawRect(color = Color.Black, alpha = 0.2f)
}

Cache the Path

A chart Path is a classic win. Build it once in the cache block, then just drawPath it every frame without rebuilding.

val path = Path().apply { /* shape */ }
onDrawBehind { drawPath(path, Color.Green) }

React to Size

Inside the cache block you can read size safely. When the canvas resizes, your block re-runs and rebuilds objects to fit.

Avoid State Reads in Draw

Reading state during drawing can trigger extra work. Keep your draw block lean and move setup into the cache block instead.

Measure, Do Not Guess

Before optimizing, profile. The Layout Inspector and frame timings tell you what really stutters, so you fix the right thing.

Reuse Wherever You Can

The golden rule: build heavy objects once and reuse them. drawWithCache makes that pattern easy and your animations buttery smooth.

Quick Check

Where should you create an expensive Brush so it is not rebuilt every frame?

Recap

You learned to keep drawing fast: build heavy objects in the drawWithCache block, draw cheaply in onDrawBehind, and always measure first. Smooth frames! ⚡

Häufig gestellte Fragen

Ist die Lektion „drawWithCache und Performance“ kostenlos?

Ja — der vollständige Text von „drawWithCache und Performance“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „drawWithCache und Performance“?

Vermeiden Sie, Zeichenobjekte in jedem Frame neu aufzubauen. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?

Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.

Wie lange dauert die Lektion „drawWithCache und Performance“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?

Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu Jetpack Compose Academy