SwiftUI Academy · Aula

ScrollView Horizontal e Vertical

Role conteúdo arbitrário em qualquer direção.

ScrollView Horizontal e Vertical é uma aula grátis de SwiftUI Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de SwiftUI Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de SwiftUI Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Beyond One Screen

Sometimes your content is taller than the screen. A ScrollView lets users glide past the edges to see it all. 📜

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

Vertical by Default

A plain ScrollView scrolls up and down. Wrap a tall VStack inside and everything becomes swipeable.

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

Going Horizontal

Pass .horizontal as the axis and your content scrolls left and right instead, great for image carousels.

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

Pick Your Axis

The first argument is the axis: use .vertical, .horizontal, or even both for free, two-way scrolling.

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

Hiding the Indicator

Set showsIndicators to false to hide the little scroll bar for a cleaner, more designed look.

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

Content Sizes Itself

A ScrollView only scrolls when its content is bigger than the visible area. Short content just sits still.

Pair with a Stack

Always put a VStack or HStack inside, since a ScrollView holds one child and the stack lines the rest up.

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

Free-form vs List

Reach for a ScrollView when you want full layout freedom; a List adds rows and separators for you.

Add Some Padding

Give inner content padding so it does not hug the screen edges as users scroll past it.

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

Carousels Made Easy

A horizontal ScrollView of cards is the classic recipe for a swipeable carousel of photos or products.

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

Smooth and Native

Scrolling feels buttery because ScrollView uses the same engine as the rest of iOS. It just works. ✨

Quick Check

Think about which direction you want to move.

Recap

You learned that a ScrollView reveals overflowing content, scrolls vertically by default, and goes horizontal with an axis. 🎉

Perguntas Frequentes

A aula “ScrollView Horizontal e Vertical” é grátis?

Sim — o texto completo de “ScrollView Horizontal e Vertical” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de SwiftUI Academy, atualize para CoddyKit PRO. O curso de SwiftUI Academy inclui 4 aulas no total.

O que vou aprender em “ScrollView Horizontal e Vertical”?

Role conteúdo arbitrário em qualquer direção. Você pratica SwiftUI Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar SwiftUI Academy?

Nenhuma experiência prévia é necessária. SwiftUI Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “ScrollView Horizontal e Vertical”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de SwiftUI Academy?

Sim. Cada aula de SwiftUI Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para SwiftUI Academy