SwiftUI Academy · Lektion

Bakgrunder och hörnradie

Tillämpa färger, gradienter och rundade hörn.

Lektion 3 av 413 steg

Bakgrunder och hörnradie är en gratis lektion i SwiftUI Academy på CoddyKit. Detta är lektion 3 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.

Lägga till en bakgrund

Modifieraren background målar bakom en vy. Lägg till en färg så fylls området som vyn upptar, vilket direkt förvandlar vanlig text till en bricka.

Text("Hello")
    .background(.blue)

Utfyllnad först, sedan färg

En bakgrund följer innehållet tätt. Lägg till padding före bakgrunden så att färgen får bekvämt utrymme runt texten på insidan.

Text("Pill")
    .padding()
    .background(.blue)

Lättläst text på färg

Mörka bakgrunder behöver ljus text. Kombinera en färgad bakgrund med foregroundStyle så att etiketten förblir tydlig och lättläst.

Text("Tag")
    .padding()
    .background(.indigo)
    .foregroundStyle(.white)

Runda hörnen

Skarpa hörn kan kännas hårda. Modifieraren cornerRadius mjukar upp dem genom att beskära vyn till en vänligt rundad rektangel.

Text("Soft")
    .padding()
    .background(.blue)
    .cornerRadius(12)

Ordningen skapar formen

Hörnradien rundar det som kommer före den, så placera den efter bakgrunden. Om Ni rundar hörnen före färgen beskärs texten i stället för brickan.

Bakgrund med en form

För bättre kontroll kan Ni skicka en form till background. En RoundedRectangle fyller och rundar hörnen i ett steg – det moderna sättet att bygga kort.

Text("Card")
    .padding()
    .background(RoundedRectangle(cornerRadius: 16).fill(.teal))

Skapa en cirkel

En stor radie på en kvadratisk vy skapar en cirkel. Kombinera en ram med samma bredd och höjd med clipShape och Circle för runda avatarer och ikonbrickor.

Text("A")
    .frame(width: 60, height: 60)
    .background(.orange)
    .clipShape(Circle())

Gradienter som bakgrunder

Bakgrunder är inte begränsade till enfärgade ytor. En LinearGradient ger djup genom en mjuk övergång från en färg till en annan över vyn.

Text("Glow")
    .padding()
    .background(LinearGradient(colors: [.pink, .orange], startPoint: .top, endPoint: .bottom))

Material för djup

SwiftUI levereras med genomskinliga Material-bakgrunder som suddar ut det som finns bakom dem och ger kort en inbyggd känsla av frostat glas.

Text("Frosted")
    .padding()
    .background(.ultraThinMaterial)

Lägga till en kantlinje

Kombinera en bakgrund med en overlay-linje för att markera konturerna på ett kort. Kantlinjen med den rundade rektangeln följer samma hörn som fyllningen.

Text("Bordered")
    .padding()
    .overlay(RoundedRectangle(cornerRadius: 12).stroke(.gray))

Bygga ett riktigt kort

Kombinera dessa verktyg så skapas ett kort: utfyllnad för utrymme, en bakgrund för färg och en hörnradie som rundar det till en välutformad bricka.

Text("Done")
    .padding()
    .background(.green)
    .cornerRadius(10)

Snabb kontroll

Kontrollera att Ni har förstått hur ordningen på modifierarna fungerar.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Fantastiskt! Nu kan Ni utforma vyer med en background, runda hörn och lägga till gradienter, material och kantlinjer för att bygga rena, återanvändbara kort.

Gratis att börja

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

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Bakgrunder och hörnradie” gratis?

Ja – hela texten till ”Bakgrunder och hörnradie” 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 ”Bakgrunder och hörnradie”?

Tillämpa färger, gradienter och rundade hörn. 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 3 av 4.

Hur lång tid tar lektionen ”Bakgrunder och hörnradie”?

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

← Tillbaka till SwiftUI Academy