【SwiftUI】ScrollViewの使い方

(2021/08/04 更新)

縦横にスクロール可能なViewを生成するScrollViewの使い方を解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】12.5RC
【Swift】5.4
【iOS】14.5
【macOS】Big Sur バージョン 11.5
スポンサーリンク

基本的な使い方

【引数】
axis
スクロール方向を .vertical(縦方向)か .horizontal(横方向)のいずれかで指定します。
[.vertical, .horizontal] と配列形式で指定すると縦横両方へのスクロールが可能となります。
未指定の場合、デフォルト値は .vertial です。

showIndicators
スクロールインジケーターの表示/非表示をBool値で指定します。
未指定の場合、デフォルト値は true(表示)です。

使用例(縦方向スクロール:デフォルト)

使用例(縦方向スクロール:デフォルト)

使用例(全方向スクロール)

使用例(全方向スクロール)

次のようにViewに表示しきれない大きな画像をスクロール表示のするにも使えます。

使用例(大きな画像のスクロール)

スポンサーリンク

ScrollViewを入れ子にして使う

ScrollViewは次のように入れ子(ネスト)でも使えます。

ScrollViewを入れ子で使う

スポンサーリンク

ScrollView内に余白を入れたい場合

ScrollView内に余白をいれる場合は、Spacer()のminLength引数を使います。

ScrollViewの幅や高さの合計は可変なので、引数無しのSpacer()は役に立ちません。

スポンサーリンク

Listとの違い(注意点)

Listの場合は、画面がスクロールして表示されるタイミングで各項目のインスタンスが生成されます。

しかし、ScrollViewの場合は、表示するまで待機はせず、すぐにインスタンスを生成しますので、大量の項目を表示するようなケースでは注意が必要です。

スポンサーリンク

あわせて読みたい記事

【SwiftUI】ScrollViewReaderの使い方
スクロール位置を指定するScrollViewReaderの使い方を解説します。
【SwiftUI】Listの使い方
(2021/09/26 更新)Listはデータの一覧表示をするのに適したViewです。画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。ListはForEa...
【SwiftUI】画像(Image)の使い方
SwiftUIで画像を表示するのには、Image()を使用します。Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。
スポンサーリンク
SwiftUI
カピ通信