Lager med ZStack
Lägg vyer ovanpå varandra bakifrån och framåt för att skapa djup.
Lager med ZStack ä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.
Stapling på djupet
VStack går nedåt och HStack går åt sidan, men ibland vill du att vyer ska överlappa. Då behöver du en stack som arbetar på djupet. 🧱
Möt ZStack
En ZStack lägger sina underordnade vyer lager på lager bakifrån och framåt, som glasskivor staplade ovanpå varandra. Senare vyer placeras ovanpå tidigare vyer.
Din första ZStack
Inuti en ZStack är det första underordnade elementet det bakre lagret och det sista det främre. Här ligger texten ovanpå den färgade bakgrunden.
ZStack {
Color.blue
Text("On top")
}Ordning bakifrån och framåt
Regeln för ritning är enkel: tidigare underordnade element ligger bakom, och senare ligger framför. Den sista vy du skriver får den översta platsen.
Enkelt att skapa bakgrunder
En ZStack är ett naturligt sätt att placera en färg eller bild bakom ditt innehåll. Lägg en Color först och lägg sedan dina vyer ovanpå den.
Centrerad överlappning
Som standard centrerar en ZStack varje underordnat element över samma punkt, så att lagren delar samma mittpunkt. Du ändrar detta med ett alignment-argument.
ZStack(alignment: .topLeading) {
Color.gray
Text("Corner")
}Märken på ikoner
Ett vanligt ZStack-mönster är ett märke som svävar över en ikon, till exempel en siffra för olästa meddelanden i hörnet av en klocka.
Bestäm ZStacks storlek
En ZStack får storleken hos sitt största underordnade element. En liten etikett över en stor bild ger stacken bildens fullständiga storlek.
Kort med överlagringar
Lägg en toning och en titel över ett foto för att skapa ett kort. Med ZStack förblir texten läsbar ovanpå alla bakgrundsbilder.
ZStack {
Image("cover")
Text("Caption")
}ZStack är en vy
Precis som de andra stackarna är en ZStack en vy, så modifierare för padding, frame eller background tillämpas på hela lagergruppen tillsammans.
När du bör använda ZStack
Använd en ZStack när vyer måste överlappa: en bakgrund bakom innehåll, en vattenstämpel, ett märke eller text som svävar över en bild.
Snabbtest
Vi testar hur väl du behärskar lager i ZStack.
Sammanfattning: lager av vyer
Fantastiskt! En ZStack lägger underordnade vyer lager på lager bakifrån och framåt, centrerar dem som standard och är ditt verktyg för bakgrunder, märken och överlappande 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 ”Lager med ZStack” gratis?
Ja – hela texten till ”Lager med ZStack” 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 ”Lager med ZStack”?
Lägg vyer ovanpå varandra bakifrån och framåt för att skapa djup. 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 ”Lager med ZStack”?
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.