SwiftUI ScrollView not getting updated?

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