Прозрачная панель навигации в SwiftUI с backgroundImage - PullRequest
Новая
       73

Прозрачная панель навигации в SwiftUI с backgroundImage

0 голосов
/ 18 июня 2020

enter image description here

У меня есть настраиваемая панель навигации, которая представляет собой изображение, за которым следует текст заголовка. Изображение настроено на масштабирование для заполнения, но не полностью заполняет панель навигации. Таким образом, вы можете видеть небольшую часть полосы, которую изображение не закрывает. Я попытался очистить цвет фона панели навигации, но это не сработало. Есть предложения? 

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

1 Ответ

0 голосов
/ 18 июня 2020

Вместо установки цвета фона вам нужна другая конфигурация, как показано ниже (протестировано с 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
...