SwiftUIでコードでViewをスクロールさせたいときは、ScrollViewReaderを使用します。
この記事では使い方を紹介します。
目次
使い方
ScrollViewReaderは次のような形で、ScrollViewの親ビューとして使用します。ScrollViewReaderのビュービルダーにはScrollViewProxyのインスタンスが渡されます。ScrollViewProxyのscrollToメソッドを使ってスクロールできます。
コード例
//
// ContentView.swift
// Scrolling01
//
// Created by Akira Hayashi on 2024/05/18.
//
import SwiftUI
struct ContentView: View {
@Namespace var imageViewID
var body: some View {
VStack {
ScrollViewReader { proxy in
HStack {
Button(action: {
scrollToTopLeading(proxy: proxy)
}) {
Text("Top Leading")
}
Button(action: {
scrollToBottomTrailing(proxy: proxy)
}) {
Text("Bottom Trailing")
}
}
.padding()
ScrollView([.horizontal, .vertical]) {
Image("Image")
.id(imageViewID)
}
}
}
}
func scrollToTopLeading(proxy: ScrollViewProxy) {
proxy.scrollTo(imageViewID, anchor: .topLeading)
}
func scrollToBottomTrailing(proxy: ScrollViewProxy) {
proxy.scrollTo(imageViewID, anchor: .bottomTrailing)
}
}
#Preview {
ContentView()
}
左上と右下へのスクロール
コードからスクロールさせるには、次のようにscrollToメソッドを使います。
proxy.scrollTo(imageViewID, anchor: .bottomTrailing)最初の引数はどのビューまでスクロールさせるかをIDで指定します。IDを取得するために、次のようにidモディファイアを使っています。
@Namespace var imageViewID
Image("Image")
.id(imageViewID)ビューのどこにスクロールさせるのかを指定するのが、引数 anchorです。色々ありますが、このサンプルでは.topLeadingで左上、.bottomTrailingで右下にスクロールさせています。
垂直方向のみスクロール可能なビューであれば、.topで先頭、.bottomで末尾などを指定します。
TextEditorのときは？
TextEditorビューは自分自身でスクロール可能なのですが、ScrollViewReaderでスクロールさせるには、本来は不要なScrollViewを配置する必要があります。
@State private var fullText: String = ""
ScrollViewReader { proxy in
ScrollView {
TextEditor($fullText)
}
}どんなところで使ったことがあるか
筆者の場合は、SwiftUIでログを表示するビューを作った時に使用しました。ログが追加されたときに自動的に最新のログを表示するためには、自動的に末尾にスクロールさせる必要がありました。そこで、使用しました。
