使用 SwiftUI 显示错误

Question

我有一个 SwiftUI 应用程序，有时会出现显示错误。

我有一个 NavagigationView 可以这样显示：

但有时在设备中它看起来像这样（页面顶部显示错误）：

我不明白这是从哪里来的。

编辑： 这是该页面的代码：

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

Answer 1

原因肯定是因为使用了ZStack 作为顶视图，但如果使用List 它应该是List 作为顶视图...

这是一个解决方案（很粗糙，由于缺少依赖关系而未测试），但想法应该很清楚。

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

Answer 2

我认为问题源于 View 具有可变数量的组成视图。具体来说，“FilterPopUp”仅在 showFilterPopUp=true 时出现。试试这个或类似的方法，当 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()
            }