【SwiftUI】ScrollViewの使い方

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

スポンサーリンク

環境

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

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

基本的な使い方

スクロール方向は、.vertical(縦方向)か.horizontal(横方向)のいずれかを指定可能です。
未指定の場合のデフォルト値は.vertialです。

縦横両方にスクロールさせたい場合は、[.vertical, .horizontal]のように配列形式で指定できるようですが、私が試した範囲ではiOS13.Xで、正常に動かないケースがありました。バージョンアップを待ちましょう。

引数showsIndicatorsでスクロールインジケーターの表示/非表示を切り替えられます。
デフォルトはtrue(表示)です。

使用例

ScrollViewの使用例

ScrollView内にスペースを入れたい場合は、上記例のように

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

スポンサーリンク

Listとの違い(注意点)

Listの場合は、画面がスクロールして表示されるタイミングで各項目のインスタンスが生成されます。
しかし、ScrollViewの場合は、表示するまで待機はせず、すぐにインスタンスを生成しますので、大量の項目を表示するようなケースでは注意が必要です。

スポンサーリンク

縦横スクロールの組み合わせ

ScrollViewを入れ子にして、次のように縦横スクロールの組み合わせも可能です。

縦横スクロールの組み合わせ

スポンサーリンク

あわせて読みたい記事

【SwiftUI】Listの使い方
(2020/11/22 更新)Listはデータの一覧表示をするのに適したViewです。画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。ListはForEa...
【SwiftUI】 Viewのレイアウト(VStack、HStack、ZStack)
SwiftUIではStackと呼ばれる部品配置用のViewを組み合わせて、レイアウトを作成します。本記事では3つのStack View(VStack、HStack、ZStack)を中心にレイアウト方法を解説します。
【SwiftUI】画像(Image)の使い方
SwiftUIで画像を表示するのには、Image()を使用します。Image()はプロジェクトに取り込んだ画像の他に、OSに標準で組み込まれたシステムアイコンの表示も可能です。
スポンサーリンク
SwiftUI
カピ通信