2023/11/30

【Swift UI】ScrollViewを任意の位置までスクロールさせる方法！ScrollViewReader

この記事からわかること

Swift UIでScrollViewを任意の位置までスクロールさせる方法
ScrollViewReaderの使い方
idモディファイア

index

[open]

ScrollViewで任意の位置までスクロールさせる方法
セクションごとに指定してスクロール

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：15.0.1
iOS：17.0
Swift：5.9
macOS：Sonoma 14.1

ScrollViewで任意の位置までスクロールさせる方法

ScrollViewで任意の位置のビューをスクロールさせて表示させたい場合はScrollViewReaderを使用します。ScrollView内のViewにはidモディファイアで一意の識別子を付与しておき、scrollToメソッドでid値を指定することで自動でスクロールさせることができます。

ScrollViewReader { reader in
    Button {
        withAnimation {
            reader.scrollTo(60)
        }
    } label: {
        Text("60番目へ")
    }

    ScrollView {
        ForEach((1...100), id: \.self) { num in
            Text("Item\(num)")
                .id(num)
        }
    }
}

ただし表示される状態なるまでスクロールされるようなので指定したidのビューがスクロールビューの中心に来るわけではないようなので注意してください。

セクションごとに指定してスクロール

idモディファイアには文字列も渡せるのでセクションごとに名前をつけておき、スクロールさせることも可能です。

 ScrollViewReader { reader in
    Button {
        withAnimation {
            reader.scrollTo("セクション2")
        }
    } label: {
        Text("セクション2へ")
    }

    ScrollView {
        VStack {}.id("セクション1")
        VStack {}.id("セクション2")
        VStack {}.id("セクション3")
        VStack {}.id("セクション4")
        
    }
}