【SwiftUI】ScrollViewReaderでScrollの移動制御

この記事を読む事でできる事

以下GifのようにList表示されているViewにて任意の位置へ移動させる事ができます。

環境

・ macOS: Monterey
・ Xcode: 13.3
・iOS: 15.0

実装方法

ScrollViewReaderを使用する事でスクロール位置を任意の位置に移動する事ができます。
https://developer.apple.com/documentation/swiftui/scrollviewreader

上記の公式ドキュメンでは色が変化していくScrollViewに対して瞬時にtopもしくはbottomへスクロール移動させる事ができるサンプルがあります。利用用途としてはスクロールの一番下の時に一番上へ、逆に一番上では一番下へ移動させたい事が往々としてあると思いますので、上記のサンプルを参考にすればすぐに実装できると思います。その他任意の場所に移動させたい場合は以下のようなコードでできます。

@State private var num = 20
var body: some View {
    VStack {
        ScrollViewReader { proxy in
            List {
                ForEach(1..<100) { item in
                    Text("Number" + String(item))
                        .id(item)
                }
            }
            Button {
                withAnimation {
                    proxy.scrollTo(num, anchor: UnitPoint(x: 0, y: 0))
                }
            } label: {
                Text("jump to selected number")
            }
        }
    }

ポイントは.idでTextのIDを指定されたプロキシ値にバインドする事と、proxy.scrollTo内で指定のid位置を定義する事です。細かく位置を指定したい場合はUnitPointで行う事ができます。

以下の記事ではTextFieldを利用してより柔軟的にスクロール位置を指定できるようなサンプルが紹介されています。
https://capibara1969.com/3562/

まとめ

スクロール位置を任意の位置へJumpさせたい時はScrollViewReaderを使用すると簡単に実装できる事がわかりました！また.idはHashableに準拠させた値を使用する必要があるのであらかじめHashableに準拠したenum作っておくといいかもと思いました。またサンプルできたら更新したいと思います。