• 2023/11/30
• 3分

【Swift UI】ScrollViewを任意の位置までスクロールさせる方法！ScrollViewReader

＼ アプリをリリースしました ／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

• Xcode：15.0.1
• iOS：17.0
• Swift：5.9
• macOS：Sonoma 14.1

ScrollViewで任意の位置までスクロールさせる方法

ScrollViewで任意の位置のビューをスクロールさせて表示させたい場合はScrollViewReaderを使用します。ScrollView内のViewにはidモディファイアで一意の識別子を付与しておき、scrollToメソッドでid値を指定することで自動でスクロールさせることができます。

ScrollViewReader { reader in
    Button {
        withAnimation {
            reader.scrollTo(60)
        }
    } label: {
        Text("60番目へ")
    }

    ScrollView {
        ForEach((1...100), id: \.self) { num in
            Text("Item\(num)")
                .id(num)
        }
    }
}

ただし表示される状態なるまでスクロールされるようなので指定したidのビューがスクロールビューの中心に来るわけではないようなので注意してください。

セクションごとに指定してスクロール

idモディファイアには文字列も渡せるのでセクションごとに名前をつけておき、スクロールさせることも可能です。

 ScrollViewReader { reader in
    Button {
        withAnimation {
            reader.scrollTo("セクション2")
        }
    } label: {
        Text("セクション2へ")
    }

    ScrollView {
        VStack {}.id("セクション1")
        VStack {}.id("セクション2")
        VStack {}.id("セクション3")
        VStack {}.id("セクション4")
        
    }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。