概要

SwiftUIにおいて、Listが1番下までスクロールされたことを検知するベストプラクティスを紹介します。

色々調べてみて、GeometryReaderやUIScrollViewを使用するやり方がありました。今回はListの性質を利用したやり方でやってみたいと思います。

サンプルコードの概要

Listに数値を表示して、1番下までスクロールした事を検知
Listを更新する際に変なとこに？スクロールしないようにする

やり方

1. Listに数値を表示して、1番下までスクロールした事を検知

まず、ListとForEachで適当なViewを作成します。Listには数値を表示します。

ContentView

List {
    ForEach(viewModel.numbers, id: \.self) { number in
        Text("Number \(number)")
            .frame(height: 100)
    }
}

また、今回データは以下のViewModelで定義します。loadMoreNumbersによって数値を20個取得して、numbersが更新されます。

NumberListViewModel

class NumberListViewModel: ObservableObject {
    @Published var numbers: [Int] = Array(1...10)
    @Published var isLoading = false
    @Published var lastNumber: Int?
    
    func loadMoreNumbers() {
        // 更新前のラストのデータを保持
        lastNumber = self.numbers.last
        guard !isLoading else { return }
        isLoading = true
        
        DispatchQueue.global().asyncAfter(deadline: .now() + 2) {
            let moreNumbers = (self.numbers.count + 1)...(self.numbers.count + 20)
            DispatchQueue.main.async {
                self.numbers.append(contentsOf: moreNumbers)
                self.isLoading = false
            }
        }
    }
}

Listは画面に表示されているViewをレンダリングする（遅延読み込み）ので、onAppearを使用することで、子Viewが画面に表示しているかを判定できます。

このことを利用して、レンダリングされた子View（今回は数値）がviewModelの数値データのラストと一致するか判定することで、1番下までスクロールしているか検知できます。

ContentView

List {
    ForEach(viewModel.numbers, id: \.self) { number in
        Text("Number \(number)")
            .frame(height: 100)
            .id(number)
            .onAppear {
                print("\(number)のViewがレンダリングされたで！")
                // 最後の数値が表示されているか判定
                if number == viewModel.numbers.last {
                    viewModel.loadMoreNumbers()
                }
            }
    }
}

2. Listを更新する際に変なとこに？スクロールしないようにする

しかし、これだけだとデータ更新によってListが再レンダリングされてしまうため、Listの1番上までスクロールしたりしてしまいます。。。。
そこで、ScrollViewReaderを使用して、Scrollを制御します。

ListをScrollViewReaderで囲ってから使ってください。

.onChange(of: viewModel.numbers) {
    if let lastNumber = viewModel.lastNumber {
        proxy.scrollTo(lastNumber, anchor: .bottom)
    }
}

コードの全貌

コメントや細かい解説を書いて見やすくしました。

コードの全貌

import SwiftUI

struct ContentView: View {
    @StateObject private var viewModel = NumberListViewModel()
    var body: some View {
        ScrollViewReader { proxy in
            List {
                ForEach(viewModel.numbers, id: \.self) { number in
                    Text("Number \(number)")
                        .frame(height: 100)
                        .id(number)
                        .onAppear {
                            print("\(number)のViewがレンダリングされたで！")
                            // 1番下のデータが表示されているか判定
                            if number == viewModel.numbers.last {
                                // データをさらに読み込む
                                viewModel.loadMoreNumbers()
                            }
                        }
                }
            }
            .onChange(of: viewModel.numbers) {
                // 更新する前までのデータのラストのViewを1番下に合わせる。→勝手にスクロールさせないため。
                if let lastNumber = viewModel.lastNumber {
                    proxy.scrollTo(lastNumber, anchor: .bottom)
                }
            }
        }
    }
}

#Preview {
    ContentView()
}

class NumberListViewModel: ObservableObject {
    // 表示するデータ
    @Published var numbers: [Int] = Array(1...10)
    // ロード可能かの判定: 本当はLoadState的なenumを作るのがいいかも
    @Published var isLoading = false
    // 更新する前までのデータのラストデータ: データを画面に追加したときに"scrollTo"で自動スクロールするために使用
    @Published var lastNumber: Int?
    
    // データをさらに読み込むメソッド
    func loadMoreNumbers() {
        // 更新前のラストのデータを保持
        lastNumber = self.numbers.last
        guard !isLoading else { return }
        isLoading = true
        
        DispatchQueue.global().asyncAfter(deadline: .now() + 2) {
            let moreNumbers = (self.numbers.count + 1)...(self.numbers.count + 20)
            DispatchQueue.main.async {
                self.numbers.append(contentsOf: moreNumbers)
                self.isLoading = false
            }
        }
    }
}

終わりに

今回はListが遅延読み込みに対応していることを利用して、Listが1番下までスクロールしたことを検知するコードを書きました。また、LazyVStackも遅延読み込みに対応しているので、今回と同じようなことができるはずです。

参考資料