swiftUI form bug on XCode13 and iOS15 and iPadOS15

Viewed 601

I was building a form on Xcode 12 and using iOS 14 and everything was working as expected. But after switching to 13 and iOS 15, the height of the cells are inconsistent, even changing when scrolled offscreen like they were a reusable table cell.

For example, I have this code: *** EDIT: I changed the below code to have everything that's currently on that page.

    Struct EvalViewMHx: View {
    var body: some View {
    VStack {
        
        Form {
            
            Label(
                title: {
                    Text("Demographics & Medical History")
                        .font(.title)
                        .foregroundColor(.white)
                        .padding()
                },
                icon: {
                    Image(systemName: "heart.text.square.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .foregroundColor(.white)
                    
                })
                .listRowBackground(Color.blue)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .center)
            
            
            Section(header: Text("Demographics")) {
                demographicsView(nameText: $nameText, DOB: $DOB, height: $height, weight: $weight)
            }
            
            
            
            Section(header: Text("Medical History")) {
                
                VStack {
                    HStack {
                        Text("When did you get hurt?")
                        
                            .padding()
                        
                        Spacer()
                        
                        Toggle("", isOn: $doesNotKnowInjuryDate)
                            .frame(width: 35)
                            .padding(.horizontal)
                        
                        Text("I don't know")
                            .fontWeight(!doesNotKnowInjuryDate ? .regular : .bold)
                            .padding(.leading)
                        
                    }
                    
                    if !doesNotKnowInjuryDate {
                        DatePicker("Injury Date", selection: $injuryDate, displayedComponents: [.date])
                            .foregroundColor(Color(UIColor.systemGray3))
                            .padding()
                    }
                    
                }
                .frame(minWidth: .zero, idealWidth: .infinity, maxWidth: .infinity, minHeight: 150, idealHeight: 150, maxHeight: 150, alignment: .center)
                
                VStack(alignment: .leading) {
                    
                    HStack {
                        Text("Where is your injury?")
                        
                        Spacer()
                        
                        Text("Right")
                            .fontWeight(isInjuryOnRightSide ? .regular : .bold)
                        
                        Toggle("", isOn: $isInjuryOnRightSide)
                            .toggleStyle(SwitchToggleStyle(tint: Color(UIColor.systemGray5)))
                            .frame(width: 35)
                            .padding(.horizontal)
                        
                        Text("Left")
                            .fontWeight(!isInjuryOnRightSide ? .regular : .bold)
                            .padding(.leading)
                    }
                    .zIndex(2.0)
                    
                    
                    
                    Picker(selection: $injuryLocation, label: Text(""), content: {
                        ForEach(injuryLocations, id: \.self) { location in
                            Text(location)
                        }
                    })
                    .pickerStyle(WheelPickerStyle())
                    .frame(minWidth: .zero, idealWidth: .infinity, maxWidth: .infinity, minHeight: 100, idealHeight: 100, maxHeight: 100, alignment: .center)
                    .zIndex(1.0)
                    .padding()
                    
                    
                    
                }
                .padding()
                
                VStack(alignment: .leading) {
                    Text("How did you get hurt? (Method of Injury)")
                        .padding()
                    
                    TextEditor(text: $MOI)
                        .frame(height: 150)
                        .background(Color(UIColor.systemGray5).opacity(0.75))
                        .cornerRadius(15)
                    
                }
                .frame(minWidth: .zero, idealWidth: .infinity, maxWidth: .infinity, minHeight: 200, idealHeight: 200, maxHeight: 200, alignment: .center)
                .padding()
                
                if injuryLocation != "Lower Back" && injuryLocation != "Upper Back" && injuryLocation != "Head / Neck" && injuryLocation != "Chest" {
                    
                    VStack {
                        pastInjuryHistory(injuryLocation: $injuryLocation, hasHadSameSideInjury: $hasHadSameSideInjury, hasHadOppositeSideInjury: $hasHadOppositeSideInjury, isSameSide: true)
                        
                        pastInjuryHistory(injuryLocation: $injuryLocation, hasHadSameSideInjury: $hasHadSameSideInjury, hasHadOppositeSideInjury: $hasHadOppositeSideInjury, isSameSide: false)
                        
                    }
                }
            }
        }
    }
}
    }

(In the picture below, you're also seeing some buttons at the top, which are just rectangles in a horizontal scroll view. The code above is then just placed below that in a tab view like so: )

                        TabView(selection: $activeTab) {
            
            EvalViewMHx()
                .tag(1)
            
            EvalObjectiveView()
                .tag(2)
            
            viewThree(activeTab: $activeTab)
                .tag(3)
            
            viewFour(activeTab: $activeTab)
                .tag(4)
            
        }
        .tabViewStyle(PageTabViewStyle())
        .onChange(of: activeTab, perform: { value in
            print(activeTab)
        })
        .animation(.default)

and the output shows that one of the cells has a totally different height.

enter image description here

Even stranger, another section has a cell with a 0 height but still shows the text field sitting over the rest of the cells. I have a picker view that is also in these cells and putting the pickerStyle to

.pickerStyle(InlinePickerStyle())

expands the cell to larger than an iPad screen size and doesn't put it in a wheel like it did in the previous versions.

Are these bugs that I should just be patient for a fix, or is there something that I can do to fix this and keep moving with my project?

1 Answers

Was struggling with the same issue. Turned out .animation caused the issue, as its deprecated since iOS 15. Removing that line fixed the issue for me.

Related