在 SwiftUI 中创建自定义导航栏，因此其他 SwiftUI 视图应重用相同的导航栏

Question

In iOS SwiftUI, How we can make a common layout for Navigation Bar. So we can use that in all project without re-write the same code.

We can use ViewBuilder to create base view for common code as follows:

struct BaseView<Content: View>: View {
let content: Content
init(@ViewBuilder content: () -> Content) {
    self.content = content()
}
var body: some View {
    // To-do: The most important part will go here
  }
}

How we can add Navigation bar Code in View Builder or Base view?

Answer 1

One way to achieve this is to use a custom view as an overlay.

For example consider the below code which makes a custom navigation bar using overlay:

struct Home: View {
    var body: some View {
        ScrollView {
            // Your Content
        }
        .overlay {
            ZStack {
                Color.clear
                    .background(.ultraThinMaterial)
                    .blur(radius: 10)

                Text("Navigation Bar")
                    .font(.largeTitle.weight(.bold))
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .padding(.leading, 20)
            }
            .frame(height: 70)
            .frame(maxHeight: .infinity, alignment: .top)
        }
    }
}

The ZStack inside the .overlay will make a view that looks like a navigation bar. You can then move it to its own struct view, add different variables to it and call it from overlay.