[SwiftUI]ScrollViewを特定の位置までスクロールするには?

SwiftUI

どうも、ちょげ(@chogetarou)です。

ScrollViewを特定の位置までスクロールする方法を紹介します。

スポンサーリンク

方法

インターフェース, インターネット, プログラム, ブラウザ, Www

ScrollViewを特定の位置までスクロールするには、ScrollViewReaderを使います。

まず、ScrollViewをScrollViewReaderで囲みます

ScrollViewReader { reader in
    ScrollView {
        //View
    }
}

次に、ScrollViewの要素に、idを付与します。

ScrollItem()
    .id(id)

最後に、ScrollViewReaderの引数からscrollToメソッドを呼び出します。

scrollToメソッドの引数には、スクロールしたい位置の要素のidを指定します。

reader.scrollTo(id) //スクロールした位置の要素のidを指定

scrollToメソッドを呼び出すことで、引数に指定した位置までスクロールします。

scrollToメソッドを呼び出すと、一瞬で目的の場所までスクロールします。

もし、スクロールにアニメーションを加えたい場合は、scrollToメソッドをwithAnimation内で呼び出します。

withAnimation (.default){
    reader.scrollTo(id)
}

使用例

struct ContentView: View {
    
    var body: some View {
        ScrollViewReader { reader in
            VStack {
                Button("Scroll To 15") {
                    withAnimation (.easeInOut){
                        reader.scrollTo(15)
                    }
                }
                
                ScrollView {
                    ForEach(1..<31) { index in
                        Text("Item \(index)")
                            .id(index)
                            .padding()
                    }
                }
            }
        }
    }
}

コメント

タイトルとURLをコピーしました