swiftui geometryで取得した座標に基づいて処理を走らせたい

Question

swiftuiのgeometryreaderについての質問です。

インスタのストーリーのような複数の画像が横に並びそれをスクロールしていく画面を作っています。
スクロール中の複数の画像から一つを選択した場合の処理は.onTapGestureなどを使えば書けるのですが、その画像が特定位置に来た時に処理を走らせる方法が分かりません。
具体的にはgeometryで取得したx座標がある特定の位置に達した時に処理を走らせたいです。

以下にコードを記載します。
geometry.frame(in: .global).origin.xの値が特定位置に達した時に、17行目のonTapGestureようにfocusnumberをその画像のindexに書き換えるという処理をしたいです。

geometry.frame(in: .global).origin.xでそれぞれの画像の座標がリアルタイムで取得できるのは20行目で確認済みです。

@State var focusNumber:Int = 1

ScrollView(.horizontal, showsIndicators: false) {//横スクロール、選手写真
                    HStack(alignment: .center) {
                        ForEach(0..<image.count, id: \.self) { index in
                            GeometryReader { geometry in
                                    Image(image[index])
                                        .resizable()
                                        .scaledToFit()//縦横比維持
                                        .overlay(RoundedRectangle(cornerRadius: 40)//写真の縁取り、枠を円にする
                                            .stroke(colorChange[String(teamnumber[index])]!, lineWidth: 4))//チーム毎に色を変える
                                        .frame(width: 80, height: 80)
                                        .clipShape(Circle())
                                        .scaleEffect(max(1,-abs(self.magnification / self.halfScreenWidth * (geometry.frame(in: .global).midX - self.halfScreenWidth)) + self.magnification))//サイズの変更
                                        .shadow(radius:10)
                                        .onTapGesture{
                                            focusNumber = index
                                        }
                                       
                                    Text("x : \(geometry.frame(in: .global).origin.x), y : \(geometry.frame(in: .global).origin.y)")
                                    
                                
                            }//geometry
                            .frame(width: 80, height: self.magnification * 80)
                            .padding()
                        }//foreach
                    }//hstack
                }//横スクロールビュー
                

Answer 1

ScrollView 直下の HStack の background で
このように処理してしまうのは如何でしょうか？

import SwiftUI

struct ContentView: View {
    @State var focusNumber:Int = 1
    
    var body: some View {
        Text("focusNumber : " + String(focusNumber))
        ScrollView(.horizontal, showsIndicators: false) {//横スクロール、選手写真
            HStack(alignment: .center) {
                ForEach(0..<10, id: \.self) { index in
                    GeometryReader { geometry in
                        Image(systemName: "pencil")
                            .resizable()
                            .scaledToFit()//縦横比維持
                            .onTapGesture{
                                focusNumber = index
                            }
                        
                        Text("x : \(geometry.frame(in: .global).origin.x), y : \(geometry.frame(in: .global).origin.y)")
                    }//geometry
                    .frame(width: 80, height: 80)
                    .padding()
                }//foreach
            }//hstack
            .background(
                GeometryReader { proxy -> Color in
                    DispatchQueue.main.async {
                        let pointX = -proxy.frame(in: .named("scroll")).origin.x
                        var target = Int(pointX / 80)
                        target = max(target, 0)
                        target = min(target, 10)
                        focusNumber = target
                    }
                    return Color.clear
                }
            )
        }//横スクロールビュー
    }
}

Comments

[zakkiblog]

なるほど、こんな方法があるのですね。
とても参考になりました。ありがとうございます。