iosswiftui

SwiftUI how to force a divider for navigation bar in NavigationView


My app has simple navigation logic using navigation view. I use the inline style navigation bar:

mainView
  .navigationBarTitleDisplayMode(.inline)

I notice that the navigation bar's divider is missing for the root view. And it appears when I scroll up the content a bit.

This first screenshot shows the initial state (without nav bar divider):

enter image description here

This second screenshot shows the state when I scroll up the content a bit, and it shows nav bar divider:

enter image description here

Is it possible to always show the divider without scrolling?


Solution

  • I think you can work around by adding a manual Divider and ScrollView under VStack so that the divider will appear beneath the navigation bar

    //
    //  testUI.swift
    //  DDStore (iOS)
    //
    //  Created by belal medhat on 19/02/2022.
    //
    
    import SwiftUI
    
    struct navTitleBar: View {
        var body: some View {
            NavigationView {
                // main navigationView
                VStack() {
                    // vstack to add the divider and under it the scrollview
                    Divider()
                    ScrollView() {
                        Text("Hello, World!")
                    }.navigationBarTitleDisplayMode(.inline).navigationTitle("Title")
                }
            }
        }
    }
    
    struct testUI_Previews: PreviewProvider {
        static var previews: some View {
            navTitleBar()
        }
    }
    

    enter image description here