SwiftUI-自定义导航“后退”按钮,在视图之间奇怪地来回跳转

杰森·特雷曼

在这种情况下,我设置了“主/细节”视图。从“事件”视图导航到“事件详细信息”视图。如果用户点击我使用“ Button(action:{self.presentationMode.wrappedValue.dismiss()} ..”设计的“返回”按钮,则视图将暂时更改回“事件”列表,但随后跳转自动返回到用户正在浏览的详细信息视图。

这是“事件列表”页面上的代码

import SwiftUI
import Firebase

struct EventsView: View {
@Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
@State var data: [EventObject] = []

let db = Firestore.firestore()


var body: some View {
    ZStack {
        VStack {
            List {
                ForEach((self.data), id: \.self.eventID) { item in
                    NavigationLink(destination: EventDetail()) {
                    VStack {
                        HStack{
                            Text("\(item.eventDate)")
                                .font(.footnote)
                                .foregroundColor(Color("bodyText"))
                            Spacer()
                        }
                        HStack {
                            Text("\(item.eventTitle)")
                                .fontWeight(.bold)
                                .foregroundColor(Color("Charcoal"))
                            Spacer()
                        }.padding(.top, 8)
                    }.padding(.bottom, 16)

                } // nav

                }
                Spacer()
            }


                .padding(.top, 60)
        }
        //Floating Navbar
        ZStack {
            VStack {
                 GeometryReader { gr in
                     HStack {
                         Button(action: {self.presentationMode.wrappedValue.dismiss()}) {
                             Image(systemName: "chevron.left")
                                 .foregroundColor(Color("Charcoal"))
                                 .padding(.leading, 16)
                             HStack {
                                 Text("Explore · Disney Events")
                                     .font(.system(size: 15))
                                     .fontWeight(.bold)
                                     .foregroundColor(Color("Charcoal"))

                                     .padding()
                                 Spacer()
                             }
                         }.frame(width: gr.size.width * 0.92, height: 48)
                             .background(Color("navBackground"))

                             .cornerRadius(8)
                             .shadow(color: Color("Shadow"), radius: 10, x: 2, y: 7)

                     }.padding(.leading, 16)
                     Spacer()
                 }
             }
             .padding(.top, 50)
             .edgesIgnoringSafeArea(.top)
            // Floating Nav Ends
        }
    }.onAppear(perform: self.queryEvents)

}
func queryEvents() {
    self.data.removeAll()
    self.db.collectionGroup("events").getDocuments() {(querySnapshot, err) in
        if let err = err {
            print("Error getting documents \(err)")
        } else {
            for document in querySnapshot!.documents {
                let id = document.documentID
                let title = document.get("eventTitle") as! String
                let shortDesc = document.get("eventShort") as! String
                let description = document.get("eventDescription") as! String
                let date = document.get("eventDate") as! Timestamp
                let aDate = date.dateValue()
                let formatter = DateFormatter()
                formatter.dateFormat = "E, MMM d · h:mm a"
                let formattedTimeZoneStr = formatter.string(from: aDate)
                let address = document.get("eventAddress") as! String
                let cost = document.get("eventCost") as! Double
                let location = document.get("eventLocation") as! String
                let webURL = document.get("eventURL") as! String
                self.data.append(EventObject(id: id, title: title, shortDesc: shortDesc, description: description, date: formattedTimeZoneStr, address: address, cost: cost, location: location, webURL: webURL))
            }
        }
    }
}


}





class EventObject: ObservableObject {
@Published var eventID: String
@Published var eventTitle: String
@Published var eventShort: String
@Published var eventDescription: String
@Published var eventDate: String
@Published var eventAddress: String
@Published var eventCost: Double
@Published var eventLocation: String
@Published var eventURL: String


init(id: String, title: String, shortDesc: String, description: String, date: String, address: String, cost: Double, location: String, webURL: String) {
    eventID = id
    eventTitle = title
    eventShort = shortDesc
    eventDescription = description
    eventDate = date
    eventAddress = address
    eventCost = cost
    eventLocation = location
    eventURL = webURL
}
}

事件详细信息在下面简化了代码。我试图带走东西寻找原因。它似乎与Firebase调用无关。

import SwiftUI
import Firebase
import MapKit

struct EventDetail: View {
@Environment(\.presentationMode) var presentationMode: 
Binding<PresentationMode>

//    var eventID: String
//    var eventTitle: String
//    var eventShort: String
//    var eventDescription: String
//    var eventDate: String
//    var eventAddress: String
//    var eventCost: Double
//    var eventLocation: String
//    var eventURL: String

    var body: some View {
        ZStack {

            VStack {
                GeometryReader { gr in
                    HStack {
                        Button(action:         {self.presentationMode.wrappedValue.dismiss()}) {
                            Image(systemName: "chevron.left")
                                .foregroundColor(Color("Charcoal"))
                                .padding(.leading, 16)
                            HStack {
                                Text("Events · Event Details")
                                    .font(.system(size: 15))
                                    .fontWeight(.bold)
                                    .foregroundColor(Color("Charcoal"))        
                                .padding()
                            Spacer()
                        }
                    }.frame(width: gr.size.width * 0.92, height: 48)
                        .background(Color("navBackground"))

                        .cornerRadius(8)
                        .shadow(color: Color("Shadow"), radius: 10, x: 2, y: 7)

                }.padding(.leading, 16)
                Spacer()
            }
        }
        .padding(.top, 50)
        .edgesIgnoringSafeArea(.top)



    }
}


}

这是一个视频,以说明我在说什么。Dropbox视频链接

他的脾气

这是一个基于您的视图的简化变体的可行方法的演示。这个想法是使用基于标记/选择的NavigationLink构造函数,并将绑定传递给选择,EventDetail以通过绑定停用选择,从而激活向后导航。

注意:我认为这presentationMode不是为导航方案设计的。

struct EventsView: View {
    @State private var selectedItem: Int? = nil

    var body: some View {
        NavigationView {
            List {
                ForEach(0..<10, id: \.self) { item in
                    NavigationLink("Item \(item)", destination: EventDetail(selected: self.$selectedItem), tag: item, selection: self.$selectedItem)
                }
            }
        }
    }
}

struct EventDetail: View {
    @Binding var selected: Int?
    var body: some View {
        VStack {
            HStack {
                Button(action: { self.selected = nil }) {
                    Image(systemName: "chevron.left")
                    HStack {
                        Text("Events · Event Details")
                            .padding()
                        Spacer()
                    }
                }
                .navigationBarHidden(true)
                .navigationBarBackButtonHidden(true)
            }
            Spacer()
        }
    }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章