[SwiftUI] ScrollView をスクロールさせる

SwiftUI2021

     

TAGS:

⌛️ < 1 min.
配置した ScrollView をプログラム的にスクロールさせる方法を説明します。

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Monterey 13 Beta3
  • Xcode 14.0 Beta3
  • iOS 16.0 beta

ScrollView

ScrollView は、内包する (大きサイズの) View をスクロール付きで表示する (コンテナ) View です。

ScrollView は、以下の記事で説明しています。
SwiftUI2021 [SwiftUI] ScrollView の使い方

ScrollViewReader

ScrollView をプログラム的にスクロールするための要素として、ScrollViewReader が用意されています。

Apple のドキュメントは、こちら

ScrollViewProxy

ScrollViewReader でラップすると、ScrollView をコントロールする要素として、ScrollViewProxy が渡されます。

scrollTo

scrollTo が ScrollView をスクロールするメソッドです。

Apple のドキュメントは、こちら

ドキュメントを見るとわかりますが、ScrollViewProxy には、scrollTo メソッドしかありません。


func scrollTo(
    _ id: ID,
    anchor: UnitPoint? = nil
) where ID : Hashable

ScrollView 中の View の ID を指定して、その箇所へスクロールします。

anchor を指定することで、指定された View を ScrollView 中のどの位置に合わせるかを指定することもできます。

例えば、.center を指定すると ScrollView の中央に表示されるようにスクロールします。

まとめ

ScrollView は、ScrollViewReader を使うと、指定要素を表示するように スクロールさせることができる。

ScrollView は ScrollViewReader を使うとスクロールさせることができる
  • ScrollView を ScrollViewReader で 囲うことで、制御できるようになる
  • ScrollViewReader から渡される ScrollViewProxy を使って、制御する
  • ScrollViewProxy の scrollTo メソッドを使って、View の id 指定でスクロールさせる
  • anchor 引数を指定することで、スクロール後の 指定 View の ScrollView 中の位置を指定できる

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

SwiftUI おすすめ本

SwiftUI を理解するには、以下の本がおすすめです。

SwiftUI ViewMastery

SwiftUI で開発していくときに、ViewやLayoutのための適切なmodifierを探すのが大変です。
以下の”SwiftUI Views Mastery Bundle”という本がビジュアル的に確認して探せるので、超便利です。

SwiftUIViewsMastery

SwiftUI 徹底入門

# SwiftUI は、毎年大きく改善されていますので、少し古くなってしまいましたが、いまでも 定番本です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です