SwiftUI ScrollView not getting updated? - swiftui

Question

Goal
Get data to display in a scrollView
Expected Result
Actual Result
Alternative
use List, but it is not flexible (can't remove separators, can't have multiple columns)
Code
struct Object: Identifiable {
var id: String
}
struct Test: View {
#State var array = [Object]()
var body: some View {
// return VStack { // uncomment this to see that it works perfectly fine
return ScrollView(.vertical) {
ForEach(array) { o in
Text(o.id)
}
}
.onAppear(perform: {
self.array = [Object(id: "1"),Object(id: "2"),Object(id: "3"),Object(id: "4"),Object(id: "5")]
})
}
}

Answer 1

A not so hacky way to get around this problem is to enclose the ScrollView in an IF statement that checks if the array is empty
if !self.array.isEmpty{
ScrollView(.vertical) {
ForEach(array) { o in
Text(o.id)
}
}
}

Answer 2

I've found that it works (Xcode 11.2) as expected if state initialised with some value, not empty array. In this case updating works correctly and initial state have no effect.
struct TestScrollViewOnAppear: View {
#State var array = [Object(id: "1")]
var body: some View {
ScrollView(.vertical) {
ForEach(array) { o in
Text(o.id)
}
}
.onAppear(perform: {
self.array = [Object(id: "1"),Object(id: "2"),Object(id: "3"),Object(id: "4"),Object(id: "5")]
})
}
}

Answer 3

One hacky workaround I've found is to add an "invisible" Rectangle inside the scrollView, with the width set to a value greater than the width of the data in the scrollView
struct Object: Identifiable {
var id: String
}
struct ContentView: View {
#State var array = [Object]()
var body: some View {
GeometryReader { geometry in
ScrollView(.vertical) {
Rectangle()
.frame(width: geometry.size.width, height: 0.01)
ForEach(array) { o in
Text(o.id)
}
}
}
.onAppear(perform: {
self.array = [Object(id: "1"),Object(id: "2"),Object(id: "3"),Object(id: "4"),Object(id: "5")]
})
}
}

Answer 4

The expected behavior occurs on Xcode 11.1 but doesn't on Xcode 11.2.1
I added a frame modifier to the ScrollView which make the ScrollView appear
struct Object: Identifiable {
var id: String
}
struct ContentView: View {
#State var array = [Object]()
var body: some View {
ScrollView(.vertical) {
ForEach(array) { o in
Text(o.id)
}
}
.frame(height: 40)
.onAppear(perform: {
self.array = [Object(id: "1"),Object(id: "2"),Object(id: "3"),Object(id: "4"),Object(id: "5")]
})
}
}

Answer 5

Borrowing from paulaysabellemedina, I came up with a little helper view that handles things the way I expected.
struct ScrollingCollection<Element: Identifiable, Content: View>: View {
let items: [Element]
let axis: Axis.Set
let content: (Element) -> Content
var body: some View {
Group {
if !self.items.isEmpty {
ScrollView(axis) {
if axis == .horizontal {
HStack {
ForEach(self.items) { item in
self.content(item)
}
}
}
else {
VStack {
ForEach(self.items) { item in
self.content(item)
}
}
}
}
}
else {
EmptyView()
}
}
}
}