在 SwiftUI 中創建自定義導航欄，因此其他 SwiftUI 視圖應重用相同的導航欄

Question

在 iOS SwiftUI 中，我們如何為導航欄制作通用布局。 所以我們可以在所有項目中使用它而無需重新編寫相同的代碼。

我們可以使用 ViewBuilder 為通用代碼創建基本視圖，如下所示：

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

我們如何在 View Builder 或 Base 視圖中添加導航欄代碼？

Answer 1

實現此目的的一種方法是使用自定義視圖作為覆蓋。

例如，考慮下面的代碼，它使用覆蓋創建自定義導航欄：

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

.overlay中的 ZStack 將創建一個看起來像導航欄的視圖。 然后，您可以將其移動到自己的結構視圖中，向其中添加不同的變量並從疊加層中調用它。