Rader med HStack
Placera vyer sida vid sida horisontellt.
Rader med HStack är en gratis lektion i SwiftUI Academy på CoddyKit. Detta är lektion 2 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.
Horisontell layout
Ibland hör vyer ihop sida vid sida i stället för att staplas nedåt. Då använder du VStacks horisontella motsvarighet. ➡️
Möt HStack
En HStack placerar sina underordnade vyer horisontellt, från vänster till höger. Den passar perfekt för rader, till exempel en ikon bredvid en etikett.
Din första HStack
Placera vyer innanför klamrarna i HStack, så ställs de upp tvärs över skärmen i den ordning du skrev dem.
HStack {
Text("Left")
Text("Right")
}Ordning från vänster till höger
I en HStack placeras det första underordnade elementet vid den ledande kanten, och senare element följer mot den avslutande kanten. Kodens ordning är ordningen från vänster till höger.
Ikon plus etikett
En klassisk HStack kombinerar en Image med en Text, så att en ikon och dess bildtext hålls på samma rad, som en rad på en inställningsskärm.
HStack {
Image(systemName: "bell")
Text("Alerts")
}Centrerad vertikalt
Som standard justerar en HStack sina underordnade vyer mot den vertikala mitten, så att en hög bild och kort text linjeras prydligt längs sina mittpunkter.
HStack håller sig till sitt innehåll
Precis som VStack krymper en HStack så att den passar sina underordnade vyer i stället för att fylla hela bredden. Den tar bara det utrymme den behöver.
Kombinera HStack och VStack
Nästla en HStack inuti en VStack för att bygga ett kort: en titelrad överst och en detaljrad under den. Genom att blanda båda riktningarna kan du bygga riktiga layouter.
VStack {
Text("Title")
HStack {
Text("A")
Text("B")
}
}HStack är en vy
En HStack är också en vy, så modifierare som padding eller background tillämpas på hela raden på en gång, som på ett enda block.
Rader med blandat innehåll
En HStack innehåller gärna olika vytyper tillsammans, till exempel ett tal, en etikett och en knapp på samma vågräta rad.
HStack {
Text("42")
Button("Add") { }
}När du bör använda HStack
Använd en HStack när elementen ska läsas från vänster till höger: en etikett och ett värde, ett verktygsfält med knappar eller en avatar bredvid ett namn.
Snabbtest
Vi bekräftar hur HStack placerar ut elementen.
Sammanfattning: horisontella rader
Mycket bra! En HStack radar upp vyer från vänster till höger, centrerar dem vertikalt och passar utmärkt ihop med VStack för att bygga kort och rader. 🙌
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 ”Rader med HStack” gratis?
Ja – hela texten till ”Rader med HStack” 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 ”Rader med HStack”?
Placera vyer sida vid sida horisontellt. 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 2 av 4.
Hur lång tid tar lektionen ”Rader med HStack”?
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.