iOS

[SwiftUI] 自動でスクロール

Sato Takeshi

2024年7月10日 • 3 min read

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

ScrollViewReader初期化メソッドにScrollViewProxyのインスタンスを取得
スクロールする子Viewそれぞれにidを指定する
ScrollViewProxyのscrollToメソッドで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技術本は他にありません！
気になる分野があればぜひチェックしてください。

Swift 5.9からのデータ監視 Observationフレームワーク入門技術の泉シリーズ

iOS17から使えるObservationフレームワーク入門の解説

Swiftの非同期処理を解説