SwiftUI Academy · レッスン

横方向と縦方向のScrollView

任意のコンテンツをあらゆる方向にスクロールします。

「横方向と縦方向のScrollView」はCoddyKit上の無料SwiftUI Academyレッスンです。これはレッスン1/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これは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時間対応のAIチューター）、SwiftUI Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 SwiftUI Academyコースには全4レッスンが含まれています。

「横方向と縦方向のScrollView」で何を学びますか？

任意のコンテンツをあらゆる方向にスクロールします。ブラウザで直接実行するハンズオンコードでSwiftUI Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

SwiftUI Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのSwiftUI Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/4です。

「横方向と縦方向のScrollView」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このSwiftUI Academyレッスンでコードを書いて実行できますか？

はい。すべてのSwiftUI Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← SwiftUI Academyに戻る