[SwiftUI] 自動でスクロール

iOS 14からScrollViewReaderというViewが追加され、スクロールをコード上から操作できるようになりました。
使い方は

  • ScrollViewReader初期化メソッドにScrollViewProxyのインスタンスを取得
  • スクロールする子Viewそれぞれにidを指定する
  • ScrollViewProxyscrollToメソッドでidの値を指定する
  • 指定したidのViewに対してスクロールが行われる
// View
ScrollViewReader { proxy in
    List {
        ForEach(model.ids, id: \.self) { i in // 各子Viewにidを振る
            Text("Example \(i)")
                .font(.title)
                .frame(maxWidth: .infinity, minHeight: 80)
                .background(colors[i % colors.count])
        }
    }
    .onChange(of: model.forcusID) { oldValue, newValue in
        withAnimation {
            proxy.scrollTo(newValue, anchor: .top) // 指定したidのViewにスクロール
        }
    }
}

// ViewModel
@Observable
final class ScrollModel {
    let ids = Array(0..<100)
    var forcusID: Int = 0

    func start() {
        Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { timer in
            if let max = self.ids.max(), max >= self.forcusID {
                print(self.forcusID)
                self.forcusID = self.forcusID + 1

            }
        }
    }
}

scrollToメソッド

scrollToメソッドの第2引数はUnitPoint型で、スクロールの位置を指定できます。
主な指定方法は日本語(左から右へ記述する言語)の場合、次の通りです。

  • zero:Viewの原点(左隅)
  • center: Viewの中心点(水平方向、垂直方向)
  • leading: 左端(Alignment/leadingと同じ)
  • trailing: 右端(Alignment/trailingと同じ)
  • top: 上部(Alignment/topと同じ)
  • bottom: 下部(Alignment/bottomと同じ)

ソースコード

全体のソースコードはGistにあげています。
https://gist.github.com/SatoTakeshiX/1edf795ab9939e776c42290ac6821f2f

宣伝

インプレスR&D社よりSwiftの技術解説本を刊行しています。
ここまで日本語で丁寧に説明しているSwift技術本は他にありません!
気になる分野があればぜひチェックしてください。

iOS17から使えるObservationフレームワーク入門の解説
Swiftの非同期処理を解説
Swift 5.9からのデータ監視 Observationフレームワーク入門 技術の泉シリーズ | 佐藤 剛士 | 工学 | Kindleストア | Amazon
Amazonで佐藤 剛士のSwift 5.9からのデータ監視 Observationフレームワーク入門 技術の泉シリーズ。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。
一冊でマスター!Swift Concurrency入門 技術の泉シリーズ (技術の泉シリーズ(NextPublishing)) | 佐藤 剛士 | 工学 | Kindleストア | Amazon
Amazonで佐藤 剛士の一冊でマスター!Swift Concurrency入門 技術の泉シリーズ (技術の泉シリーズ(NextPublishing))。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。