SwiftUI 中带有背景图像的透明导航栏

Question

我有一个自定义导航栏，它是图像后跟 header 文本。图像设置为缩放以填充但没有完全填满导航栏。因此，您可以看到图像未覆盖的一小部分条形图。我试图将导航栏的背景颜色设置为清除，但这不起作用。有什么建议吗？

struct ContentView: View {
@State private var hideBar = true

var body: some View {
    VStack {
        NavigationView {
            ZStack {
                Image("bg5").resizable().scaledToFill()

                VStack {
                    NavigationLink(destination:
                    SubView(header: "Go to subview")) {
                        Text("Go to subview")
                    }.simultaneousGesture(TapGesture().onEnded {
                       self.hideBar = false     // << show, here to be smooth !!
                    })

                    NavigationLink(destination:
                        SubView(header: "Go again")) {
                        Text("Go to subview again")
                    }.simultaneousGesture(TapGesture().onEnded {
                       self.hideBar = false     // << show, here to be smooth !!
                    })
                }
                .navigationBarTitle("")
                .navigationBarHidden(hideBar)
                .onAppear {
                    self.hideBar = true  // << hide on back
                }
            }.edgesIgnoringSafeArea([.top, .bottom])
        }
    }
}
}

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

var btnBack : some View { Button(action: {
    self.presentationMode.wrappedValue.dismiss()
    }) {
        HStack {
                Image("subheaderback").resizable().scaledToFit()
                VStack(alignment: .center) {
                    Text(self.header)
                }.frame(width: 100, height: 100)
        }
    }.buttonStyle(PlainButtonStyle())
}

var body: some View {
    ZStack {
        Image("bg5").resizable().scaledToFill()
        VStack {
            Text("blah blah")

            Text("and more blah")
        }
    }.edgesIgnoringSafeArea([.top, .bottom])
    .navigationBarBackButtonHidden(true)
    .navigationBarItems(leading: btnBack)
}
}

extension UINavigationController {
override open func viewDidLoad() {
    super.viewDidLoad()

    let appearance = UINavigationBarAppearance()
    appearance.backgroundColor = .clear
    appearance.backgroundImage = UIImage(named: "subheader")

    navigationBar.standardAppearance = appearance
    navigationBar.compactAppearance = appearance
    navigationBar.scrollEdgeAppearance = appearance
}
}

Answer 1

您需要不同的配置而不是设置背景颜色，如下所示（使用 Xcode 11.4 / iOS 13.4 测试）

let appearance = UINavigationBarAppearance()
appearance.configureWithTransparentBackground()            // << this one !!
appearance.backgroundImage = UIImage(named: "subheader")
// appearance.backgroundImageContentMode = .scaleAspectFit // if needed non-default

SwiftUI 中带有背景图像的透明导航栏

Transparent navigationbar in SwiftUI with backgroundImage

transparent

navigationbar

ios

swiftui