SwiftUI Academy · Lektion

Lineære, radiale og vinklede gradienter

Fyld views med jævne farveovergange.

Lektion 2 af 413 trin

Lineære, radiale og vinklede gradienter er en gratis SwiftUI Academy-lektion på CoddyKit. Dette er lektion 2 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 SwiftUI Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. SwiftUI Academy-kurset indeholder 4 lektioner i alt.

Hvad er en gradient

En gradient blander to eller flere farver jævnt. Den tilfører dybde og et gennemarbejdet udtryk, som en ensfarvet udfyldning ikke kan give. 🌈

Gradienter er også visninger

Ligesom Color er en LinearGradient en visning. Du kan placere den direkte eller bruge den til at udfylde en form eller baggrund.

Din første LinearGradient

En LinearGradient lader farverne flyde langs en lige linje. Angiv farver samt et start- og slutpunkt for at bestemme retningen.

LinearGradient(
    colors: [.blue, .purple],
    startPoint: .top,
    endPoint: .bottom
)

Valg af start- og slutpunkter

Punkter som .topLeading og .bottomTrailing retter gradienten diagonalt. Byt dem om for at ændre blandingens vinkel.

startPoint: .topLeading
endPoint: .bottomTrailing

Mere end to farver

Angiv flere farver, så fordeler gradienten dem jævnt over hele sin længde. Det er perfekt til baggrunde i solnedgangsstil.

LinearGradient(
    colors: [.orange, .pink, .purple],
    startPoint: .leading,
    endPoint: .trailing
)

RadialGradient stråler udad

En RadialGradient stråler fra et centrum og udad i en cirkel. Den er perfekt til spotlys og bløde glød-effekter.

RadialGradient(
    colors: [.yellow, .red],
    center: .center,
    startRadius: 5,
    endRadius: 120
)

Justering af radius

startRadius og endRadius bestemmer, hvor tæt eller bredt gløden breder sig. Større forskelle giver jævnere og langsommere overgange.

AngularGradient fejer rundt

En AngularGradient lægger farverne rundt om et centrum som på et farvehjul. Den skaber en flot kegleformet, hvirvlende effekt.

AngularGradient(
    colors: [.red, .green, .blue, .red],
    center: .center
)

Gradient som baggrund

Tilføj en gradient med modifikatoren background for at give enhver visning en lysere baggrund bag dit indhold. Et øjeblikkeligt visuelt løft.

Text("Hi")
    .padding()
    .background(LinearGradient(
        colors: [.blue, .cyan],
        startPoint: .top, endPoint: .bottom))

Kortformede gradienter

Hvis du hurtigt vil blande farver, kan du kalde .gradient på enhver farve. SwiftUI opretter straks en diskret gradient fra top til bund for dig.

Circle()
    .fill(Color.blue.gradient)

Vælg den rigtige gradient

Brug linear til retningsbestemte overgange, radial til glød og angular til farvehjul. De giver hver især din brugerflade en anden stemning. 🎨

Hurtigt tjek

Hvilken gradient fejer sine farver rundt om et centrum?

Besvar den i den interaktive lektion

Opsummering: Gradienter

Du kan nu blande farver på tre måder: linear langs en linje, radialt fra et centrum og angular rundt om et farvehjul. Flot arbejde!

Gratis at komme i gang

Lær Swift 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

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Lineære, radiale og vinklede gradienter” gratis?

Ja — hele teksten til “Lineære, radiale og vinklede gradienter” 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 SwiftUI Academy-kurset, skal du opgradere til CoddyKit PRO. SwiftUI Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Lineære, radiale og vinklede gradienter”?

Fyld views med jævne farveovergange. Du øver dig i SwiftUI 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å SwiftUI Academy?

Der kræves ingen tidligere erfaring. SwiftUI 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 2 af 4.

Hvor lang tid tager lektionen “Lineære, radiale og vinklede gradienter”?

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 SwiftUI Academy-lektion?

Ja. Alle SwiftUI 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

← Tilbage til SwiftUI Academy