ScrollView position data / SwiftUi

Question

I am a student, new to SwiftUI and still learning. When I scroll the ScrollView, I want the above image to slowly increase its opacity with each step. I don't know how. Do you have any information. I could not find an example. Can you do that How do we get ScrollView motion data?

I tried a few times but failed.

struct Home: View {
    var body: some View {
        TabView{
            NavigationView{
                ZStack {
                    GeometryReader{ geometry in
                        Color.black.edgesIgnoringSafeArea(.all)
                        VStack{//Ana sayfa image animation bölümü
                            Spacer().frame(height:geometry.size.height / 7)
                            Image("HandP")
                                .resizable()
                                .aspectRatio(ContentMode.fit)
                                .frame(width:geometry.size.width,height:geometry.size.height / 3)
                        }
                        ScrollView(.vertical){
                            VStack(spacing: 20) {
                                Spacer().frame(height:geometry.size.height / 2)//ScrollView üst boşluk
                                Button(action: {
                                    //some action
                                }) {
                                    Text("önceki")
                                }
                                
                                HStack(spacing: 10) {
                                    NavigationLink(destination: SendCoffeeFortune()){
                                        Text("Kahve Falı")
                                    }
                                    .navigationBarTitle(Text("Geri"),displayMode: .inline)
                                    .navigationBarHidden(true)
                                    
                                    Button(action: {
                                        
                                    }) {
                                        Text("Astroloji")
                                    }
                                }
                                
                                HStack(spacing: 10) {
                                    NavigationLink(destination: SpecialCoffeeFortune()){
                                        Text("Özel Fal")
                                    }
                                    .navigationBarTitle(Text("Geri"),displayMode: .inline)
                                    .navigationBarHidden(true)
                                    
                                    Button(action: {
                                        
                                    }) {
                                        Text("Tarot")
                                    }
                                }
                                
                                HStack(spacing: 10) {
                                    Button(action: {
                                        //some action
                                    }) {
                                        Text("Uyum")
                                    }
                                    
                                    NavigationLink(destination: SendHandFortune()){
                                        Text("El Falı")
                                    }
                                    .navigationBarTitle(Text("Geri"),displayMode: .inline)
                                    .navigationBarHidden(true)
                                }
                            }
                            .padding()
                            .padding()
                        }
                        
                    }
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    
                }
            }
        }
    }
}

Answer 1

I'm sure you can get the ScrollViews content offset by only using GeometryReader but in my opinion that's a pain and if you're allowed to for your study you should use this ScrollViewProxy package.

I simplified your code a little to make it easier to show what I added

import ScrollViewProxy

struct Home: View {
    @State var offset: CGPoint = .zero

    var body: some View {
        VStack {
            Image(...)
                .opacity(min(1, offset.y/100)) // You should change this to calculate when you want the opacity to change
            ScrollView { proxy in 
                Color.clear
                    .frame(height: 1000)
                    .onReceive(proxy.offset) { self.offset = $0 }
            }
        }
    }
}

If you cannot use a package you have to either get the UIScrollView using a method like in Introspect or use a UIViewRepresentable to create your own UIScrollView. Then you can access the scroll views contentOffset.

Here is an example of the latter https://gist.github.com/jfuellert/67e91df63394d7c9b713419ed8e2beb7