在 SwiftUI 视图中设置高度的问题

Question

I've implemented the design below, but I've got a bug that seems trivial to figure out the solution. The code below can draw the view and be able to display the data correctly, only when I get the data locally, but not when I get the data over the network. The view doesn't draw the card I have to click on another tab and come back to the view with the card. I tried to figure out what the issue might be, and I was able to find out this code to be the source .frame(minHeight: 0, maxHeight: .infinity) , it sets the height. If I remove this line I am able to see the card, but with a shanked height. I tried to change the height to the static value, but it didn't work. I'll appreciate your help.

View One

ScrollView(.horizontal, showsIndicators: false){
    HStack(spacing: 20){
        ForEach(someIterator) { someViewModel in
            CardView(myViewModel: someViewModel)
        }
    }.padding([.leading,.bottom,.trailing])
}
.frame(height: 420)

View Two

struct CardView: View {
    @ObservedObject var myViewModel: MyViewModel
    var body: some View {
        VStack(){
            HStack(){
                Text(myViewModel.mymodel.value)
                Text("Some text")
            }
            Text(myViewModel.mymodel.description)

        }
        .frame(minWidth: 0 , maxWidth: 327, maxHeight: 380)
        .frame(minHeight: 0 , maxHeight: .infinity) // The issue
        .background(Color("Blue"))
        .cornerRadius(10)
    }
}

Answer 1

ScrollView needs to know content size in-advance, that's why you observe issue with getting data from network, because in such case there is no initial content in scroll view and it is squeezed

Here is a solution, tested with replicated code on Xcode 11.4 / iOS 13.4

ScrollView(.horizontal, showsIndicators: false){
    HStack(spacing: 20){
        ForEach(someIterator) { someViewModel in
            CardView(myViewModel: someViewModel)
        }
    }.padding([.leading,.bottom,.trailing])
    .frame(height: 420)                      // << move inside !!
}