How to add space between NavigationStack elements and NavigationStack toolbar

Question

What: add space between the list inside a Navigation Stack and the toolbar on top.

Current code is like this

struct ContentView: View {
    let words = ["Hello", "World", "SwiftUI", "OpenAI", "ChatGPT"]
    var body: some View {
        
        NavigationStack {
            
            List(words, id: \.self) { word in
                NavigationLink(destination: AnotherView()) {
                    Text(word)
                }
            }
            .padding(.top, 50)
            .listStyle(.insetGrouped)
            .listRowInsets(EdgeInsets())
            .navigationTitle("Words")
            .toolbarBackground(.yellow, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbar {
                Text("something")
            }
            
            
            
        }

    }
}

It creates space in this white background.

How I can have space but match the background color the same as what the screen has.

score 0 · Answer 1 · answered Jul 04 '23 at 02:37

So putting a Vstack in your NavigationStack try something like below is working for me. But there is an issue with it too,

struct ContentView: View {
    let words = ["Hello", "World", "SwiftUI", "OpenAI", "ChatGPT"]
    let systemBg = UIColor.systemGroupedBackground
    var body: some View {
        NavigationStack {
            VStack(spacing: 0) {
                Color(systemBg)
                    .frame(height: 10)
                List(words, id: \.self) { word in
                    NavigationLink(destination: Text("AnotherView")) {
                        Text(word)
                    }
                }
                .listStyle(.insetGrouped)
                .listRowInsets(EdgeInsets())
                .navigationTitle("Words")
                .toolbarBackground(.yellow, for: .navigationBar)
                .toolbarBackground(.visible, for: .navigationBar)
                .toolbar {
                    Text("something")
                }
            }
            
        }
    }
}

When you pull down your list yellow color of toolbar stretch till bottom. But using above code it will loose that functionality. Not sure how much helpful it is, But you can try using this, if that is helpful. Attaching a screenshot for your ref. Tried on Xcode 14.3. I hope it helps.

score 0 · Answer 2 · answered Jul 04 '23 at 02:53

Adding

 .navigationBarTitleDisplayMode(.inline)

to the toolbar solved it.

Full code.

import SwiftUI

struct ContentView: View {
    let words = ["Hello", "World", "SwiftUI", "OpenAI", "ChatGPT"]
    var body: some View {
        
        NavigationStack {
            VStack(spacing: 0) {
                
            } 
            List(words, id: \.self) { word in
                NavigationLink(destination: AnotherView()) {
                    Text(word)
                }
            }
            
            .navigationTitle("Words")
            .toolbarBackground(.yellow, for: .navigationBar)
            .toolbarBackground(.visible, for: .navigationBar)
            .toolbar {
                Text("something")
            }
            .navigationBarTitleDisplayMode(.inline)
        }

    }
}

score 0 · Answer 3 · answered Jul 06 '23 at 04:52

Ok... I'm kind of cheating, but adding a background that's the same colour as the list background seems to work. I used a colour picker to check if the colour is right and this is as close as I got. Here's the modifier I used:

.background(Color(red: 243/256, green: 243/256, blue: 248/256))

How to add space between NavigationStack elements and NavigationStack toolbar

3 Answers3