ScrollViewReader#

ScrollViewReader は iOS14 以降で使える List や ScrollView で使える便利な機能である。

自動スクロール#

以下のコードは一見すると要素数 100 のリストを自動生成し、View を表示すると同時に 20 番目にジャンプするコードだが正しく動作しない。

var body: some View {
    ScrollViewReader { value in
        List {
            ForEach(Range(0...100)) { idx in
                Text("\(idx)")
            }
        }
        .onAppear() {
            value.scrollTo(20, anchor: .top)
        }
    }
}

この場合だとvalue.scrollTo(20, anchor: .top)の 20 は Hashable である必要があるのだが、List のそれぞれの要素について適切な ID が割り当てられていないからだ。

var body: some View {
    ScrollViewReader { value in
        List {
            ForEach(Range(0...100)) { idx in
                Text("\(idx)")
                    .id(idx)
            }
        }
        .onAppear() {
            value.scrollTo(20, anchor: .top)
        }
    }
}

このように適切に ID を割り当てれば View 表示と同時にジャンプする。ただ、このままだといきなりジャンプするのでアニメーションを挟んでゆったりとした動作にしたい場合にはwithAnimationを使えば良い。

withAnimationのネスト内で変数の値を変化させたとき、その変数の変化でビューの再描画が行われたときにアニメーションを発生させることができるようになる。

var body: some View {
    ScrollViewReader { value in
        List {
            ForEach(Range(0...100)) { idx in
                Text("\(idx)")
                    .id(idx)
            }
        }
        .onAppear() {
            withAnimation {
                value.scrollTo(20, anchor: .top)
            }
        }
    }
}

よって、完成するコードは上のようになる。

横スクロールを実装する#

struct ContentView: View {
    var body: some View {
        TabView(selection: $selection) {
            ForEach(Range(0...1000)) { idx in
                Text("CONTENT")
                    .tag(idx)
            }
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .always))
    }
}