Stroke, fill och overlay
Konturera och fyll former för brickor och kort.
Stroke, fill och overlay är en gratis lektion i SwiftUI Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för SwiftUI Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.
Fyllning kontra linje
En form kan målas inuti med fill eller få en kontur med stroke. Tillsammans låter de er bygga brickor och kort.
Fylla en form
Använd fill för att måla hela insidan av en form med en färg eller gradient. Det är det vanligaste sättet att färglägga en form. 🎨
Circle()
.fill(.blue)Skapa kontur med stroke
Modifieraren stroke ritar bara formens kant och lämnar mitten tom. Perfekt för ihåliga ringar och konturer.
Circle()
.stroke(.blue)Styra linjebredden
Ange en lineWidth till stroke för att göra konturen tjockare eller tunnare. Ett större värde ger en kraftigare kant.
Circle()
.stroke(.blue, lineWidth: 4)Streckade kanter
Använd en StrokeStyle med ett streckmönster för streckade konturer. Perfekt för platshållare och släppzoner i gränssnittet.
RoundedRectangle(cornerRadius: 12)
.stroke(style: StrokeStyle(lineWidth: 2, dash: [6]))Fyllning och linje tillsammans
Vill ni ha både en fyllning och en kant? Använd fill med argumentet stroke för att fylla insidan och skapa konturen i ett enda anrop.
Circle()
.fill(.yellow)
.stroke(.orange, lineWidth: 3)Möt overlay
Modifieraren overlay lägger en vy ovanpå en annan. Använd den för att lägga till en kant, bricka eller ikon ovanpå befintligt innehåll.
Kanter med overlay
Ett klassiskt knep: fyll en form och lägg sedan till en kopia med kontur med overlay. Då får ni ett rent, fyllt kort med en skarp kant.
RoundedRectangle(cornerRadius: 12)
.fill(.white)
.overlay(
RoundedRectangle(cornerRadius: 12)
.stroke(.gray, lineWidth: 1))Lägga en ikon ovanpå
Ni kan lägga vilken vy som helst ovanpå, inte bara former. Lägg en liten bricka eller ikon på ett kort för att framhäva nya eller viktiga objekt.
Circle()
.fill(.blue)
.overlay(Text("3").foregroundStyle(.white))overlay kontra background
Kom ihåg lagren: overlay ligger ovanpå en vy, medan background ligger bakom den. Välj utifrån vilken sida ni vill placera dekorationen på.
Bygga en bricka
Kombinera fill, stroke och overlay för att skapa välgjorda brickor, avatarer och kort. De här tre verktygen täcker det mesta av dekorationen. ✨
Snabbtest
Ni vill lägga en kontur ovanpå en fylld form. Vilken modifierare placerar en vy ovanpå?
Sammanfattning: Stroke, Fill och overlay
Ni har lärt er att måla former med fill, skapa konturer med stroke och lägga till extra lager med overlay. Nu kan ni bygga riktiga brickor och kort!
Lär dig Swift med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Stroke, fill och overlay” gratis?
Ja – hela texten till ”Stroke, fill och overlay” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i SwiftUI Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i SwiftUI Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Stroke, fill och overlay”?
Konturera och fyll former för brickor och kort. Ni övar på SwiftUI Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig SwiftUI Academy?
Du behöver inga förkunskaper. Utbildningen i SwiftUI Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Stroke, fill och overlay”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här SwiftUI Academy-lektionen?
Ja. Varje SwiftUI Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Typen Color och resursfärger
- Linjära, radiella och vinkelformade gradienter
- Inbyggda former
- Stroke, fill och overlay