Home > Software engineering >  SwiftUI how to force a divider for navigation bar in NavigationView
SwiftUI how to force a divider for navigation bar in NavigationView

Time:02-20

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?

CodePudding user response:

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

  • Related