[SwiftUI]ScrollViewを一番下までスクロールするには?

SwiftUI

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

ScrollViewを一番下までスクロールする方法を紹介します。

スポンサーリンク

方法

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

ScrollViewを一番下までスクロールするには、ScrollViewReaderを使います。

まず、ScrollViewをScrollViewReaderで囲みます

ScrollViewReader { reader in
    ScrollView {
        //View
    }
}

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

BottomView()
    .id(id)

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

scrollToメソッドの引数には、最後の要素のidを指定します。

reader.scrollTo(id)

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

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

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

使用例

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

コメント

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