0Pricing
SwiftUI Academy · Урок

Горизонтальный и вертикальный ScrollView

Прокручивайте произвольное содержимое в любом направлении.

«Горизонтальный и вертикальный ScrollView» — бесплатный урок SwiftUI Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения SwiftUI Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс SwiftUI Academy содержит 4 уроков всего.

Части этого урока еще не переведены и отображаются на английском.

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. 🎉

Часто задаваемые вопросы

Урок «Горизонтальный и вертикальный ScrollView» бесплатный?

Да — полный текст урока «Горизонтальный и вертикальный ScrollView» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс SwiftUI Academy, подпишись на CoddyKit PRO. Курс SwiftUI Academy содержит 4 уроков всего.

Чему я научусь в уроке «Горизонтальный и вертикальный ScrollView»?

Прокручивайте произвольное содержимое в любом направлении. Ты практикуешь SwiftUI Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать SwiftUI Academy?

Предыдущий опыт не требуется. SwiftUI Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Горизонтальный и вертикальный ScrollView»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке SwiftUI Academy?

Да. Каждый урок SwiftUI Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Горизонтальный и вертикальный ScrollView
  2. LazyVStack и LazyHStack
  3. Адаптивные сетки с LazyVGrid
  4. ScrollView Reader и якоря
← Назад к SwiftUI Academy