Jetpack Compose Academy · Pelajaran

drawWithCache & Performa

Hindari membangun ulang objek gambar di setiap frame.

drawWithCache & Performa adalah pelajaran Jetpack Compose Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Jetpack Compose Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Bagian dari pelajaran ini belum diterjemahkan dan ditampilkan dalam bahasa Inggris.

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! ⚡

Pertanyaan yang Sering Diajukan

Apakah pelajaran “drawWithCache & Performa” gratis?

Ya — teks lengkap “drawWithCache & Performa” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Jetpack Compose Academy, upgrade ke CoddyKit PRO. Kursus Jetpack Compose Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “drawWithCache & Performa”?

Hindari membangun ulang objek gambar di setiap frame. Kamu berlatih Jetpack Compose Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Jetpack Compose Academy?

Tidak diperlukan pengalaman sebelumnya. Jetpack Compose Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 3 dari 4.

Berapa lama pelajaran “drawWithCache & Performa” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Jetpack Compose Academy ini?

Ya. Setiap pelajaran Jetpack Compose Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Jetpack Compose Academy