[SwiftUI]ScrollViewReaderを試す

# はじめに
WWDC2020開幕しましたね:hugging:

昨年発表された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](https://developer.apple.com/documentation/swiftui/scrollviewreader)より

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

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


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

```swift
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](https://developer.apple.com/documentation/swiftui/scrollviewproxy)です。

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


```swift
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)`



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

```swift
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していただけると幸いです:bow_tone2:
[SampleScrollViewReader](https://github.com/giiiita/SampleScrollViewReader)

#まとめ

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

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

```swift
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でどこまで表示しているのかがハンドリングできそう:point_up: