SwiftUI中带有backgroundImage的透明导航栏

时间:2020-06-18 01:11:06

标签: ios swiftui transparent navigationbar

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 :(得分:0)

代替设置背景色,您需要进行其他配置,如下所示(已通过Xcode 11.4 / iOS 13.4测试)

tinymce.init({
  selector: 'textarea',
  style_formats: [
    {title: 'Class name', selector: 'p', classes: 'myclass'} 
  ]
});