Custom back button for NavigationView's navigation bar in SwiftUI

后端 未结 9 725
隐瞒了意图╮
隐瞒了意图╮ 2020-11-29 23:57

I want to add a custom navigation button that will look somewhat like this:

Now, I\'ve written a custom BackButton view for this. When applying

9条回答
  •  萌比男神i
    2020-11-30 00:18

    I expect you want to use custom back button in all navigable screens, so I wrote custom wrapper based on @Ashish answer.

    struct NavigationItemContainer: View where Content: View {
        private let content: () -> Content
        @Environment(\.presentationMode) var presentationMode
    
        private var btnBack : some View { Button(action: {
            self.presentationMode.wrappedValue.dismiss()
        }) {
            HStack {
                Image("back_icon") // set image here
                    .aspectRatio(contentMode: .fit)
                    .foregroundColor(.black)
                Text("Go back")
            }
            }
        }
    
        var body: some View {
            content()
                .navigationBarBackButtonHidden(true)
                .navigationBarItems(leading: btnBack)
        }
    
        init(@ViewBuilder content: @escaping () -> Content) {
            self.content = content
        }
    }
    
    

    Wrap screen content in NavigationItemContainer:

    Usage:

    struct CreateAccountScreenView: View {
        var body: some View {
            NavigationItemContainer {
                VStack(spacing: 21) {
                    AppLogoView()
                    //...
                }
            }
        }
    }
    

提交回复
热议问题