【SwiftUI】ScrollViewReaderの使い方

スクロール位置を指定するScrollViewReaderの使い方を解説します。

スポンサーリンク

環境

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

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

基本的な使い方

①ScrollViewProxyインスタンスを取得
スクロール制御したい箇所をScrollViewReaderで囲みます。
これによりスクロールを制御する為のScrollViewProxyインスタンス(scrollProxy)が取得できます。

②スクロール先を指定する為の一意のIDを指定
ScrollViewの各要素に.id()モディファイアを使って一意のIDを割り当てます。

③scrollToメソッドで飛び先を指定
①で取得したプロキシのscrollTo関数を使って指定されたIDを持つ要素(View)が表示されるまでスクロールします。例のようにwithAnimationで囲むと、アニメーションを伴ってスクロールします。

scrollTo関数の仕様は次の通りです。

【引数】
id
スクロールして表示させる要素(View)のIDを指定します。

anchor
対象の要素(View)をどの位置までスクロールさせるかUnitPointで指定します。
例えば .center を使用すると、対象の要素が中央部に配置されるまでスクロールします。Viewがそこまでスクロールできない場合は、最大限可能な所までスクロールします。
未指定(nil)の場合、対象の要素全体が見えるように最小量だけスクロールされます。

基本的な使い方

スポンサーリンク

全方向スクロールの例

ScrollViewReaderはScrollViewの全方向スクロールにも対応しています。
次の例は、指定した要素(View)を画面の中央に表示するよう、anchorに.centerを指定した例です。

全方向スクロールの例

スポンサーリンク

Listでの使用

ScrollViewReaderによるスクロール制御はListでも有効です。

ただし、ScrollViewとは若干動きが異なり、anchor に指定できるのは、上下の端と中央のみとなります。(不具合?)

次の例では、anchor に UnitPoint(x: 0.5, y: 0.25) を指定していますが、指定した要素は画面の上から25%の位置ではなく、中央に移動します。

Listでの使用

スポンサーリンク

合わせて読みたい記事

【SwiftUI】ScrollViewの使い方
(2021/08/04 更新)縦横にスクロール可能なViewを生成するScrollViewの使い方を解説します。
【SwiftUI】UnitPointの使い方
UnitPointはViewの相対的な位置を定義する構造体です。用途としては、例えばrotationEffectを使ってViewを回転する時の中心点の指定などがあります。
【SwiftUI】Listの使い方
(2021/7/2 更新)Listはデータの一覧表示をするのに適したViewです。画面に収まらない量の場合はスクロール表示になるなど、UIKitのUITableViewに似ていますが、はるかに簡単に使えます。ListはForEach...
スポンサーリンク
SwiftUI
カピ通信