Hide text after scrolling (SwiftUI) - ios

Question

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

Answer 1

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)
}
}

Answer 2

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