SwiftUI Academy · Lektion

Horisontell och vertikal ScrollView

Rulla valfritt innehåll i alla riktningar.

Lektion 1 av 413 steg

Horisontell och vertikal ScrollView är en gratis lektion i SwiftUI Academy på CoddyKit. Detta är lektion 1 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.

Bortom en skärm

Ibland är innehållet högre än skärmen. En ScrollView låter användare svepa förbi kanterna och se allt. 📜

ScrollView {
    Text("Lots of content here")
}

Vertikal som standard

En vanlig ScrollView rullar upp och ned. Lägg en hög VStack inuti så blir allt möjligt att svepa igenom.

ScrollView {
    VStack {
        Text("Top")
        Text("Bottom")
    }
}

Gå horisontellt

Ange .horizontal som axel så rullar innehållet i stället åt vänster och höger, vilket passar bra för bildkaruseller.

ScrollView(.horizontal) {
    HStack {
        Text("One")
        Text("Two")
    }
}

Välj axel

Det första argumentet är axeln: använd .vertical, .horizontal eller båda för fri rullning i två riktningar.

ScrollView([.horizontal, .vertical]) {
    BigContent()
}

Dölj indikatorn

Ställ in showsIndicators på false för att dölja det lilla rullningsfältet och få ett renare, mer genomarbetat utseende.

ScrollView(.horizontal, showsIndicators: false) {
    HStack { /* cards */ }
}

Innehållet bestämmer storleken

En ScrollView rullar bara när innehållet är större än det synliga området. Kort innehåll ligger bara stilla.

Kombinera med en stack

Lägg alltid en VStack eller HStack inuti, eftersom en ScrollView innehåller ett barn och stacken ordnar resten.

ScrollView {
    VStack(spacing: 16) {
        Card()
        Card()
    }
}

Fri layout jämfört med List

Välj en ScrollView när du vill ha full frihet över layouten; en List lägger till rader och avgränsare åt dig.

Lägg till lite padding

Ge det inre innehållet padding så att det inte ligger direkt mot skärmens kanter när användaren rullar förbi det.

ScrollView {
    VStack { /* content */ }
        .padding()
}

Karuseller på ett enkelt sätt

En horisontell ScrollView med kort är det klassiska receptet för en svepbar karusell med foton eller produkter.

ScrollView(.horizontal) {
    HStack {
        ForEach(items) { Card($0) }
    }
}

Smidigt och inbyggt

Rullningen känns mjuk eftersom ScrollView använder samma motor som resten av iOS. Det bara fungerar. ✨

Snabb kontroll

Tänk på åt vilket håll du vill förflytta dig.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Du lärde dig att en ScrollView visar innehåll som inte får plats, rullar vertikalt som standard och blir horisontell med en axel. 🎉

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 ”Horisontell och vertikal ScrollView” gratis?

Ja – hela texten till ”Horisontell och vertikal ScrollView” 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 ”Horisontell och vertikal ScrollView”?

Rulla valfritt innehåll i alla riktningar. 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 1 av 4.

Hur lång tid tar lektionen ”Horisontell och vertikal ScrollView”?

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