0Pricing
Jetpack Compose Academy · Aula

drawWithCache e Desempenho

Evite reconstruir objetos de desenho a cada quadro.

drawWithCache e Desempenho é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

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

Perguntas Frequentes

A aula “drawWithCache e Desempenho” é grátis?

Sim — o texto completo de “drawWithCache e Desempenho” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.

O que vou aprender em “drawWithCache e Desempenho”?

Evite reconstruir objetos de desenho a cada quadro. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Jetpack Compose Academy?

Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.

Quanto tempo leva a aula “drawWithCache e Desempenho”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Jetpack Compose Academy?

Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

  1. DrawScope: Linhas, Retângulos e Círculos
  2. Traçados, Gradientes e Modos de Mesclagem
  3. drawWithCache e Desempenho
  4. Criando um Anel de Progresso em Tempo Real
← Voltar para Jetpack Compose Academy