Question 67560 in IOS Swift Question posted in
The official documentation can be found here.

Hide text after scrolling (SwiftUI) – Ios swift

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

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0

    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)
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search