[SwiftUI]ScrollViewReaderを試す

はじめに

WWDC2020開幕しましたね

昨年発表されたSwiftUIから約1年経ちSwiftUIもパワーアップしてる感出てきたかと！
今回は追加された ScrollViewReaderについて書いてみようかと思います。

ScrollViewReader

A view whose child is defined as a function of a ScrollViewProxy targeting the scrollable views within the child.

ScrollViewReaderより

正直最初見たときは全然わかりませんでした

動作見て僕なりな言葉でいうと
ScrollView内に含まれる子要素を画面の指定箇所にスクロールしたい場合これ使おうになります

まずシンプルな状態なコードです。

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            ScrollViewReader { value in
                ForEach(0..<100) { index in
                    Text("\(index)")
                        .frame(width: 300, height: 300)
                        .background(Color.green)
                        .id(index)
                }
            }
        }
    }
}

ScrollViewReaderのclosureで返ってきてるvalueの型はScrollViewProxyです。

ScrollViewProxyはscrollToという関数を持っています。
func scrollTo<ID>(ID, anchor: UnitPoint?)

Text("\(index)")
    .frame(width: 300, height: 300)
    .background(Color.green)
    .id(index)

ScrollViewの子要素にはidがsetされており
ScrollViewProxyのscrollToで指定の子要素のidを入れてあげれば指定要素までスクロールします。
指定する要素を画面上のどこまでスクロールさせるのかは第二引数のanchorで決めれば大丈夫です。
例えばidが10の子要素を画面上まで移動させたい場合は以下になります。
func scrollTo<ID>(10, anchor: .top)

指定した子要素を画面一番上までスクロールさせるコードになります。
どれだけスクロールしても右上のボタンを押せば画面を開いた場合と同じ画面になります。

struct ContentView: View {

    @State var value: ScrollViewProxy?
    var body: some View {
        ZStack {
            ScrollView {
                ScrollViewReader { value in
                    LazyVStack(alignment: .center, spacing: 16) {
                        ForEach(0..<100) { index in
                            Text("\(index)")
                                .frame(width: 200, height: 200)
                                .background(Color.green)
                                .id(index)
                        }
                    }.onAppear {
                        self.value = value
                    }
                }
            }
            VStack {
                HStack {
                    Spacer()
                    Button(action: {
                        withAnimation {
                            self.value?.scrollTo(0, anchor: .top)
                        }
                    }, label: {
                        ZStack {
                            Circle()
                                .foregroundColor(Color.yellow)
                                .frame(width: 60, height: 60)
                            Text("top")
                                .foregroundColor(Color.black)
                        }
                    }).padding(.trailing, 16)
                }
                Spacer()
            }
        }
    }
}

実際に試してみたい方は以下リンクよりcloneしていただけると幸いです
SampleScrollViewReader

まとめ

ScrollView内に含まれる子要素を画面の指定箇所にスクロールしたい場合
例えば一番下までスクロールしたけど一番上まで戻る際などにはScrollViewReaderを使うと良さそうです

補足

まだ調査中なところではありますが、
どこまでスクロールしているのかをidで知ることは可能っぽい？です。

LazyVStack(alignment: .center, spacing: 16) {
    ForEach(0..<100) { index in
        Text("\(index)")
            .frame(width: 200, height: 200)
            .background(Color.green)
            .id(index)
            .onAppear {
                print("\(index)")
            }
    }
}

以前のVStackでは0~99のindexが画面表示時にprint出力されましたが、
LazyVStackの場合はスクロールしてViewが表示された際にそのViewのidがprint出力されてる感じがします。

以前のSwiftUIでいうListの挙動と同じように
onAppearでどこまで表示しているのかがハンドリングできそう