NEW: My new book Pro SwiftUI is out now – level up your SwiftUI skills today! >>

SOLVED: List Hugs NavigationBar

Forums > SwiftUI

I have a view where the list is right up against the navigation bar at the top. I cannot seem to figure out why, if I put padding around it i don't get the result I want.

View Code

var body: some View {
        ZStack {
            if allMedia.isEmpty {
                NoResultsView(mainTitle: .noLibraryResultsTitle, mainSubTitle: .noLibraryResultsSubTitle)
            } else {
                VStack {
                    List {
                        ForEach(allMedia) { media in
                            LibraryRowView(media: media)
                        }
                    }
                    .listStyle(.insetGrouped)
                }
            }
        }
        .navigationTitle(.libraryViewTitle)
    }

I have tried getting rid of the VStack around the list and changing the ZStack to a VStack, that didnt work. I've tried putting an offset on the List to move it down, but I end up with a gray bar at the top. I don't know why theres not some initial padding.

If anyone has an idea why I would appreicate any help I can get.

Thanks Taz

   

Have you tried putting .padding(.top, 8) on the VStack? Something like this:

var body: some View {
    ZStack {
        if allMedia.isEmpty {
            NoResultsView(mainTitle: .noLibraryResultsTitle, mainSubTitle: .noLibraryResultsSubTitle)
        } else {
            VStack {
                List {
                    ForEach(allMedia) { media in
                        LibraryRowView(media: media)
                    }
                }
                .listStyle(.insetGrouped)
            }
            .padding(.top, 8)
        }
    }
    .navigationTitle(.libraryViewTitle)
}

   

@dicard

Thanks for the reply, yes I've tried putting padding around the VStack and it still doesn't work. I've also tried putting an offset to push it down, that works but then I'm left with a gray bar at the top, which I don't like, not sure how I can turn that white.

Taz

   

Can you show a screenshot of the list being right up against the navigation bar?

Here is some simple code to compare. The navigation title and list are not right next to each other. There is some separation between them. Does this match what you are after?

I have kept your basic logic with the Zstack, Vstack, etc. and just used simple text where you have functions. Of course, also added NavigationView

struct ContentView: View {

    let allMedia = ["paper", "audio", "video"]

    var body: some View {
        NavigationView {
            ZStack {
                if allMedia.isEmpty {
                    Text("No media")
                } else {
                    VStack {
                        List {
                            ForEach(allMedia, id: \.self) { media in
                                Text(media)
                            }
                        }
                        .listStyle(.insetGrouped)
                    }
                }
            }
            .navigationTitle("Media")
        }
    }
}

   

@Greenamberred

Well, I'm not sure whats up here, but I can't seem to attach the png screenshot on my desktop to this post.

I've tried the following

ScreenShot

This doesn't work, not sure why.

   

Unfortunately you cannot add an image directly to the forum. You need to host the image elsewhere, and provide a link here.

If you can't or have no means to host the image elsewhere, then don't worry about it. Don't create an account elsewhere which maybe of limited use to you in the future. It is just if you have something that you are already using, it could be useful to see exactly what you're seeing.

Here are some examples of how others have provided links to their hosted images. You don't have to do it in these ways, or even at all.

Layer animation

Increasing text field

Day 56 Challenge

   

@Greenamberred

Ok, Here is a screenshot,

ScreenShot

   

Looking at the image that looks like the normal spacing for the navigation header and list separation.

   

@Greenamberred

Thanks for looking at that for me. I just thought it looked weird to me.

   

Hacking with Swift is sponsored by MadMachine

SPONSORED Want to explore your Swift skill outside of the Apple world? Join the MadMachine community and start to program microcontrollers in Swift.

Get it now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.