How can I hide my arrow text after ScrollView has scrolled?

struct Skroll: View {
    
    var body: some View {
        
        VStack(alignment: .trailing) {
            
            Text("<-")
                .font(.system(size: 25).bold())
                .kerning(-3)
            
            ScrollView(.horizontal, showsIndicators: false) {
                
                HStack {
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                }
            }
        }
        .padding()
    }
    
}

I can't figure out how can I hide text after scrolling, I'm new and just learning SwiftUI

CodePudding user response：

Looks like what you need is to get the current position of the scroll view. See here on how to do that. Then you can choose to display Text("<-") based on a flag which is modified when ScollView reaches a certain point

if !hideText {
    Text("<-")
        .font(.system(size: 25).bold())
        .kerning(-3)
}

It might be also possible that you might achieve the same result by moving your Text("<-") inside the scroll view. See if below works for you

ScrollView(.horizontal, showsIndicators: false) {
                
    Text("<-")
        .font(.system(size: 25).bold())
        .kerning(-3)

    HStack {
        Rectangle()
            .frame(width: 200, height: 300)
            .cornerRadius(20)
        Rectangle()
            .frame(width: 200, height: 300)
            .cornerRadius(20)
        Rectangle()
             .frame(width: 200, height: 300)
             .cornerRadius(20)
    }
}

CodePudding user response：

I think I figured out how to do it

struct Skroll: View {
    
    @State var scrollViewOffset: CGFloat = 0
    @State var start: CGFloat = 0
    
    var body: some View {
        
        VStack(alignment: .trailing) {
            
            HStack {
                
                Image(systemName: "arrowtriangle.right.fill")
                    .font(.system(size: 35).bold())
                    .opacity(-scrollViewOffset > 160.0 ? 1 : 0)
                    .animation(.easeOut, value: scrollViewOffset)
                Spacer()
                
                Image(systemName: "arrowtriangle.left.fill")
                    .font(.system(size: 35))
                    .opacity(-scrollViewOffset > 160.0 ? 0 : 1)
                    .animation(.easeOut, value: scrollViewOffset)
            }
            
            
            ScrollView(.horizontal, showsIndicators: false) {
                
                HStack {
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                    Rectangle()
                        .frame(width: 200, height: 300)
                        .cornerRadius(20)
                }
                .overlay(GeometryReader { proxy -> Color in
                    
                    DispatchQueue.main.async {
                        
                        if start == 0 {
                            self.start = proxy.frame(in: .global).minX
                        }
                        
                        let offset = proxy.frame(in: .global).minX
                        self.scrollViewOffset = offset - start
                        
                        print(self.scrollViewOffset)
                    }
                    
                    return Color.clear
                })
                
            }
        }
        .padding()
    }
    
}

result

I replaced my text with an image. I'm not sure if this is the right solution and I don't know if it might cause any errors, but this works for me. Maybe someone will find it useful too