NavigationBar thick / swiftui

Viewed 1377

I created the Navigation View, but when you jump to the page, the navigation bar is very thick, although nothing happens. I want the stick to be thinner. I do not know how to do it. I could not find the examples, I could not do it myself. Can you do it.

enter image description here

HStack(spacing: 10) {
    NavigationLink(destination: PicturePage()){
        Text("Kahve Falı")
            .font(.title)
            .foregroundColor(Color(#colorLiteral(red: 0.7239437103, green: 0.2440972626, blue: 0.4727140069, alpha: 1)))
            .frame(maxWidth: geometry.size.width)
            .frame(height: geometry.size.height / 5)
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(Color(#colorLiteral(red: 0.8527825475, green:
                                                    0.821311295, blue: 0.8959596753, alpha: 1)), lineWidth: 3)
            )

    }.navigationBarTitle(Text("Geri"))
    .navigationBarHidden(true)
}

Navigation page

struct PicturePage: View {
    //3-1//
    var body: some View {
        GeometryReader { geometry in
            Color.black.edgesIgnoringSafeArea(.all)
            VStack {
                VStack {
                    Text("Picture")
                        .font(.system(size: 60))
                        .frame(height: geometry.size.height / 10)
                        .foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))
                    Spacer().frame(height: geometry.size.height / 15)
                }

                VStack {
                    Text("Merhaba").frame(width: geometry.size.width, height: geometry.size.height / 10)
                        .foregroundColor(Color.white)
                }
                VStack {
                    Image("AstroGirl").resizable()
                        .aspectRatio(contentMode: .fit)
                        .frame(width: geometry.size.width, height: geometry.size.height / 3)
                    Spacer().frame(height: geometry.size.height / 15)
                }
                // This `HStack` is changed
                HStack(spacing: 30) {
                    ForEach(0 ..< 3) { _ in
                        CircleView()
                            .frame(width: geometry.size.width / 5, height: geometry.size.height / 10)
                            .shadow(color: Color.yellow, radius: 10, x: 0, y: 0)
                    }
                }
                Spacer().frame(height: geometry.size.height / 10)
                VStack {
                    Button(action: {}, label: {
                        Text("Gönder")
                            .frame(width: geometry.size.width / 3, height: 50)
                            .padding(10)
                            .font(Font.system(size: 30, weight: .medium, design: .serif))
                            .foregroundColor(.white)
                            .background(RoundedRectangle(cornerRadius: 30))
                            .foregroundColor(.init(red: 45 / 255, green: 0 / 255, blue: 112 / 255))

                    })
                }
            }

        }
    }
}

1 Answers

Look for property displayMode and set that to .inline

Here is a good overview of the options available and usage:

https://www.hackingwithswift.com/articles/216/complete-guide-to-navigationview-in-swiftui

More info on your follow up question...

You can extend the UINavigationController and make the background transparent for all your views. Add the below to a new swift file in your project.

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

        let appearance = UINavigationBarAppearance()
        appearance.configureWithTransparentBackground()

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

        navigationBar.prefersLargeTitles = false  // use inline titles on very view
        // navigationBar.isHidden = true  // hide the nav bar completely on every view
    }
}
Related