Jetpack Compose Academy · Lektion

drawWithCache og ydeevne

Undgå at opbygge draw-objekter igen for hver frame.

Lektion 3 af 413 trin

drawWithCache og ydeevne er en gratis Jetpack Compose Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Jetpack Compose Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.

Tegning kører ofte

Din Canvas-lambda kan køre på hver frame. Hvis du genopbygger tunge objekter dér, frame efter frame, forringer det ubemærket ydeevnen.

De dyre objekter

Ting som Path, Brush og Paint er ikke gratis at oprette. Hvis du allokerer dem ved hver tegning, spilder du arbejde, som GPU'en aldrig havde brug for.

Introduktion til drawWithCache

Modifikatoren drawWithCache lader dig opbygge dyre objekter én gang og genbruge dem. Den adskiller opsætningen fra selve tegnetrinnet.

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

Build-blokken kører sjældent

Kode i cache block køres kun igen, når størrelsen eller den tilstand, du læser, ændres. Opret din Path og Brush lige her.

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

onDrawBehind

Brug onDrawBehind til at tegne under Composable-indholdet. Den giver dig en DrawScope, der kører på hver frame, uden store omkostninger.

onDrawBehind {
    drawCircle(color = Color.Blue)
}

onDrawWithContent

Skal din grafik blandes med den faktiske brugerflade? onDrawWithContent lader dig tegne, kalde drawContent og tegne igen omkring det.

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

Gem Path i cachen

En diagram-Path er et klassisk eksempel på en gevinst. Opbyg den én gang i cache-blokken, og kald derefter bare drawPath på den ved hver frame uden at genopbygge den.

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

Reagér på størrelsen

I cache-blokken kan du trygt læse size. Når Canvas ændrer størrelse, køres blokken igen, og objekterne genopbygges, så de passer.

Undgå tilstandsaflæsninger under tegning

Hvis du læser tilstand under tegningen, kan det udløse ekstra arbejde. Hold din draw block enkel, og flyt i stedet opsætningen til cache-blokken.

Mål i stedet for at gætte

Profilér, før du optimerer. Layout Inspector og frame-målingerne viser dig, hvad der faktisk hakker, så du kan løse det rigtige problem.

Genbrug, hvor du kan

Den gyldne regel er: opbyg tunge objekter én gang, og genbrug dem. drawWithCache gør dette mønster nemt og dine animationer silkebløde.

Hurtigt tjek

Hvor bør du oprette en dyr Brush, så den ikke genopbygges ved hver frame?

Opsummering

Du har lært at holde tegningen hurtig: opbyg tunge objekter i drawWithCache-blokken, tegn billigt i onDrawBehind, og mål altid først. Jævne frames! ⚡

Gratis at komme i gang

Lær Kotlin med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
30
Lektioner
120

Ofte stillede spørgsmål

Er lektionen “drawWithCache og ydeevne” gratis?

Ja — hele teksten til “drawWithCache og ydeevne” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Jetpack Compose Academy-kurset, skal du opgradere til CoddyKit PRO. Jetpack Compose Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “drawWithCache og ydeevne”?

Undgå at opbygge draw-objekter igen for hver frame. Du øver dig i Jetpack Compose Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Jetpack Compose Academy?

Der kræves ingen tidligere erfaring. Jetpack Compose Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “drawWithCache og ydeevne”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Jetpack Compose Academy-lektion?

Ja. Alle Jetpack Compose Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. DrawScope: Linjer, rektangler og cirkler
  2. Paths, gradients og blend modes
  3. drawWithCache og ydeevne
  4. Opbyg en live-fremdriftsring
← Tilbage til Jetpack Compose Academy