ScrollViewReaderでScrollの移動制御
この記事を読む事でできる事
以下GifのようにList表示されているViewにて任意の位置へ移動させる事ができます。
環境
・ macOS: Monterey
・ Xcode: 13.3
・iOS: 15.0
実装方法
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を利用してより柔軟的にスクロール位置を指定できるようなサンプルが紹介されています。
まとめ
スクロール位置を任意の位置へJumpさせたい時はScrollViewReaderを使用すると簡単に実装できる事がわかりました！また.idはHashableに準拠させた値を使用する必要があるのであらかじめHashableに準拠したenum作っておくといいかもと思いました。またサンプルできたら更新したいと思います。
Author And Source
この問題について(ScrollViewReaderでScrollの移動制御), 我々は、より多くの情報をここで見つけました https://zenn.dev/oka_yuuji/articles/6cd8d1469d6bb0著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Collection and Share based on the CC protocol