Bug display with SwiftUI

问题

I have a SwiftUI app where sometimes a bug in the display appears.

I have a NavagigationView that sould display like this :

But sometimes in devices it appears like this(bug display at the top of the page):

I don't understand where this comes from.

EDIT: Here is the code of this page:

struct FilesAdminView: View {
    @EnvironmentObject var session : SessionStore
    @ObservedObject var fileAdminViewModel : FileAdminViewModel = FileAdminViewModel()
    @State var showFilterPopUp : Bool = false
    
    @State var selected : Int = 0
    
    var body: some View {
        NavigationView{
            ZStack{
                VStack{
                        List(fileAdminViewModel.filesDisplay) { file in
                            
                            NavigationLink(destination: SingleFileView(singleFileViewModel: SingleFileViewModel(userId: self.session.session!.uid, file: file), selected: self.$selected)) {
                                VStack(spacing: 7){
                                    HStack{
                                        Text(file.nomDossier).font(Font.custom("Montserrat-Regular", size: 15))
                                        Spacer()
                                    }
                                    
                                
                                  
                       
                                    HStack {
                                        Spacer()
                                        Image(systemName: "circle.fill")
                                        Text("\(Constants.dicoEtatDisplay[file.etat]!)")
                                        
                                    }.font(.system(size: 12, weight: .light)).foregroundColor(Constants.dicoCouleurEtat[file.etat])
                                }
                                
                            }

                        }
                
                    }
                
                if showFilterPopUp {
                    GeometryReader{_ in
                        FilterPopUp(fileAdminViewModel: self.fileAdminViewModel, showFilterPopUp: self.$showFilterPopUp)
                    }.background(Color.black.opacity(0.65).edgesIgnoringSafeArea(.all).onTapGesture {
                        self.showFilterPopUp = false
                    })
                }
            }
            .navigationViewStyle(StackNavigationViewStyle())
            //.navigationBarHidden(false)
            .navigationBarTitle("Dossiers", displayMode: .inline)
            .navigationBarItems(leading:
                
                Image("Logo").resizable().frame(width: 100, height: 100)
                , trailing:
                HStack{
                    Button(action: {
                        self.showFilterPopUp = true
                    }) {
                        Image(systemName: "list.bullet").resizable().frame(width: 18, height: 18)
                    }
                    NavigationLink(destination: SettingsAdminView().environmentObject(self.session), label: {
                        Image(systemName: "gear").resizable().frame(width: 22 , height: 22)
                    })
                }
            )
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

回答1:

The reason is definitely due to used ZStack as top view, but in case with List it should be List as top view...

Here is a solution (scratchy, not tested due to absent dependencies), but idea should be clear.

struct FilesAdminView: View {
    @EnvironmentObject var session : SessionStore
    @ObservedObject var fileAdminViewModel : FileAdminViewModel = FileAdminViewModel()
    @State var showFilterPopUp : Bool = false

    @State var selected : Int = 0

    var body: some View {
        NavigationView{
            // List have to be the top view !!
            List(fileAdminViewModel.filesDisplay) { file in

                NavigationLink(destination: SingleFileView(singleFileViewModel: SingleFileViewModel(userId: self.session.session!.uid, file: file), selected: self.$selected)) {
                    VStack(spacing: 7){
                        HStack{
                            Text(file.nomDossier).font(Font.custom("Montserrat-Regular", size: 15))
                            Spacer()
                        }




                        HStack {
                            Spacer()
                            Image(systemName: "circle.fill")
                            Text("\(Constants.dicoEtatDisplay[file.etat]!)")

                        }.font(.system(size: 12, weight: .light)).foregroundColor(Constants.dicoCouleurEtat[file.etat])
                    }

                }

            }
            .navigationViewStyle(StackNavigationViewStyle())
                //.navigationBarHidden(false)
                .navigationBarTitle("Dossiers", displayMode: .inline)
                .navigationBarItems(leading:

                    Image("Logo").resizable().frame(width: 100, height: 100)
                    , trailing:
                    HStack{
                        Button(action: {
                            self.showFilterPopUp = true
                        }) {
                            Image(systemName: "list.bullet").resizable().frame(width: 18, height: 18)
                        }
                        NavigationLink(destination: SettingsAdminView().environmentObject(self.session), label: {
                            Image(systemName: "gear").resizable().frame(width: 22 , height: 22)
                        })
                    }
            )
        }.navigationViewStyle(StackNavigationViewStyle())
        .overlay {
            Group {
                if showFilterPopUp {      // << use popup in overlay her !!
                    GeometryReader{_ in
                        FilterPopUp(fileAdminViewModel: self.fileAdminViewModel, showFilterPopUp: self.$showFilterPopUp)
                    }.background(Color.black.opacity(0.65).edgesIgnoringSafeArea(.all).onTapGesture {
                        self.showFilterPopUp = false
                    })
                }
            }
        }
    }
}

回答2:

I think the problem stem from the View having a variable number of constituent views. Specifically, the "FilterPopUp" is present only when showFilterPopUp=true. Try this, or something similar, where you provide a view when showFilterPopUp=false.

            if showFilterPopUp {
                GeometryReader{_ in
                    FilterPopUp(fileAdminViewModel: self.fileAdminViewModel, showFilterPopUp: self.$showFilterPopUp)
                }.background(Color.black.opacity(0.65).edgesIgnoringSafeArea(.all).onTapGesture {
                    self.showFilterPopUp = false
                })
            } else {
                EmptyView()
            }

来源：https://stackoverflow.com/questions/62484765/bug-display-with-swiftui