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

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

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

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

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

swiftui
1@State var focusNumber:Int = 1
2
3ScrollView(.horizontal, showsIndicators: false) {//横スクロール、選手写真
4                    HStack(alignment: .center) {
5                        ForEach(0..<image.count, id: \.self) { index in
6                            GeometryReader { geometry in
7                                    Image(image[index])
8                                        .resizable()
9                                        .scaledToFit()//縦横比維持
10                                        .overlay(RoundedRectangle(cornerRadius: 40)//写真の縁取り、枠を円にする
11                                            .stroke(colorChange[String(teamnumber[index])]!, lineWidth: 4))//チーム毎に色を変える
12                                        .frame(width: 80, height: 80)
13                                        .clipShape(Circle())
14                                        .scaleEffect(max(1,-abs(self.magnification / self.halfScreenWidth * (geometry.frame(in: .global).midX - self.halfScreenWidth)) + self.magnification))//サイズの変更
15                                        .shadow(radius:10)
16                                        .onTapGesture{
17                                            focusNumber = index
18                                        }
19                                       
20                                    Text("x : \(geometry.frame(in: .global).origin.x), y : \(geometry.frame(in: .global).origin.y)")
21                                    
22                                
23                            }//geometry
24                            .frame(width: 80, height: self.magnification * 80)
25                            .padding()
26                        }//foreach
27                    }//hstack
28                }//横スクロールビュー
29                
30

回答1件

ベストアンサー

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

SwiftUI
1import SwiftUI
2
3struct ContentView: View {
4    @State var focusNumber:Int = 1
5    
6    var body: some View {
7        Text("focusNumber : " + String(focusNumber))
8        ScrollView(.horizontal, showsIndicators: false) {//横スクロール、選手写真
9            HStack(alignment: .center) {
10                ForEach(0..<10, id: \.self) { index in
11                    GeometryReader { geometry in
12                        Image(systemName: "pencil")
13                            .resizable()
14                            .scaledToFit()//縦横比維持
15                            .onTapGesture{
16                                focusNumber = index
17                            }
18                        
19                        Text("x : \(geometry.frame(in: .global).origin.x), y : \(geometry.frame(in: .global).origin.y)")
20                    }//geometry
21                    .frame(width: 80, height: 80)
22                    .padding()
23                }//foreach
24            }//hstack
25            .background(
26                GeometryReader { proxy -> Color in
27                    DispatchQueue.main.async {
28                        let pointX = -proxy.frame(in: .named("scroll")).origin.x
29                        var target = Int(pointX / 80)
30                        target = max(target, 0)
31                        target = min(target, 10)
32                        focusNumber = target
33                    }
34                    return Color.clear
35                }
36            )
37        }//横スクロールビュー
38    }
39}