SwiftUI ScrollView programmatically scroll to top based on change of dropdown - ios

Question

I have the following code:
var body: some View {
VStack {
ScrollView {
VStack {
ForEach(1...7, id: \.self) { num in
Text("\(num)")
.font(.title3)
.padding([.top, .bottom], 5)
.onTapGesture {
self.getGames()
}
}
}
}
ScrollView() {
GameCell(games: $games, picks: self.$playerPicks)
}
.onAppear(perform: getGames)
}
}
It gets all the games and all, based on the value of num; as it should based on .onAppear(perform: getGames)
When num is selected it refreshes the main ScrollVeiw with the GameCell but if the main ScrollView (with the GameCells) is scrolled to any position, when the data refreshes it stays at that location... is there a way to have it scroll to the top of the main ScrollView (with the GameCells)?
UPDATE
I updated the code above, there are two scrollviews, I would like to have the second scrollveiw which has the GameCells scroll to the top each time the new value is selected in the first scrollview.

Answer 1

You can use ScrollViewReader (docs & HWS article).
For your use case, we need to save the ScrollViewProxy in a #State variable so it can be accessed outside of the closure. Use it like so:
struct ContentView: View {
#State private var reader: ScrollViewProxy?
var body: some View {
VStack {
ScrollView {
VStack {
ForEach(1 ... 7, id: \.self) { num in
Text("\(num)")
.font(.title3)
.padding([.top, .bottom], 5)
.onTapGesture {
self.getGames()
print("Tap:", num)
// Scroll to tag 'GameCell-top'
reader?.scrollTo("GameCell-top", anchor: .top)
}
}
}
}
ScrollView {
ScrollViewReader { reader in
LinearGradient(
gradient: Gradient(colors: [.red, .blue]),
startPoint: .top,
endPoint: .bottom
)
.frame(height: 1000)
.id("GameCell-top") // <- ID so reader works
.tag("GameCell-top") // <- Tag view for reader
.onAppear {
self.reader = reader // <- Set current reader proxy
}
// You can uncomment this view and do a similar thing to the VStack above
// GameCell(games: $games, picks: self.$playerPicks)
}
}
.onAppear(perform: getGames)
}
}
}
Result (I scroll bottom scroll view, then tap any number from 1 to 7 at the top):