SwiftUI - Scroll a list to a specific element controlled by external variable - swift

Question

I have a List populated by Core Data, like this:
#EnvironmentObject var globalVariables : GlobalVariables
#Environment(\.managedObjectContext) private var coreDataContext
#FetchRequest(fetchRequest: Expressao.getAllItemsRequest())
private var allItems: FetchedResults<Expressao>
var body: some View {
ScrollViewReader { proxy in
List {
ForEach(allItems,
id: \.self) { item in
Text(item.term!.lowercased())
.id(allItems.firstIndex(of:item))
.listRowBackground(
Group {
if (globalVariables.selectedItem == nil) {
Color(UIColor.clear)
} else if item == globalVariables.selectedItem {
Color.orange.mask(RoundedRectangle(cornerRadius: 20))
} else {
nextAlternatedColor(item:item)
}
}
}
}
}
}
}
Every time a row is selected it changes color to orange. So, you see that the color is controlled by an external variable located in globalVariables.selectedItem.
I want to be able to make the list scroll to that element on globalVariables.selectedItem automatically.
How do I do that with ScrollViewReader?
Any ideas?

Answer 1

Here is a demo of possible approach - scrollTo can be used only in closure, so the idea is to create some background view depending on row to be scrolled to (this can be achieved with .id) and attach put .scrollTo in .onAppear of that view.
Tested with Xcode 12 / iOS 14.
struct DemoView: View {
#State private var row = 0
var body: some View {
VStack {
// button here is generator of external selection
Button("Go \(row)") { row = Int.random(in: 0..<50) }
ScrollViewReader { proxy in
List {
ForEach(0..<50) { item in
Text("Item \(item)")
.id(item)
}
}
.background( // << start !!
Color.clear
.onAppear {
withAnimation {
proxy.scrollTo(row, anchor: .top)
}
}.id(row)
) // >> end !!
}
}
}
}