Why is my SwiftUI list styling off-centered, and with a grey background?

Question

I'm currently building out the home page for a project, and am running into some styling issues. I have a header card followed by a list of items.

The styling for this list is off and I'm not sure why:

I would like to remove the white spacing between the header "Your saved poems" and the black frame above.
I would like the list to be centred, without a divider, and with a white background (instead of grey).

I've attempted to make some changes but nothing works...

Screenshot here:

Code for the list view here:

import SwiftUI

struct SavedPoemList: View {
    
    @Environment(\.managedObjectContext) var moc
    @FetchRequest(entity: SavedPoem.entity(), sortDescriptors: []) var savedpoems : FetchedResults<SavedPoem>
    
    var body: some View {
        VStack (alignment: .leading) {
            
            HStack{
            Text("Your Saved Poems")
                .font(.title)
                .fontWeight(.black)
                .foregroundColor(.black)

                
            Spacer()
                
                Button(action: {}) {
                    
                    Text("Edit")
                        .font(.headline)
                        .foregroundColor(.secondary)
                }
                
                
            }.padding(.bottom)
               
            List {
                    
                ForEach(savedpoems, id:\.title) {SavedPoem in
                    NavigationLink (destination: DetailViewSaved()){
                        ZStack {
                            Rectangle().fill(Color.white)
                                .frame(width: UIScreen.main.bounds.width - 32, height: 70)
                                .cornerRadius(10).shadow(color: .gray, radius: 5)
                            HStack {
                                VStack (alignment: .leading){
                                    Text("\(SavedPoem.title ?? "")").font(.headline)
                                        .lineLimit(1)
                                    
                                    Text("\(SavedPoem.author ?? "")").font(.subheadline)
                                        .foregroundColor(.secondary)
                                }
                                Spacer()
                                
                            }.padding()
                        }
                        //                }.onDelete(perform: remove)
                    }
                }
                
            }
            .navigationTitle("My Saved Poems")
            .navigationBarHidden(true)
            .edgesIgnoringSafeArea(.top)
            .padding(.top, 0)
            .background(Color.white)
                
            }
            .padding()
            .edgesIgnoringSafeArea(.bottom)
    }
}

Code for the header card here:

import SwiftUI

struct HeaderView: View {
    
    var body: some View {
        
        NavigationView {
            
            VStack (alignment: .center){
                
                Text("Today's Poem, November 18th...")
                    .font(.subheadline)
                    .foregroundColor(.white)
                    .padding(.bottom)
                    .padding(.top, 75)
                
                Text("No Man Is An Island")
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .foregroundColor(.white)
                    .padding(.bottom,1)
                
                Text("by John Donne")
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .foregroundColor(.white)
                    .padding(.bottom, 35)
                
                
                NavigationLink (destination: DetailViewNew()) {
                    
                    Text("Read Now")
                        .fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
                        .font(.subheadline)
                        .foregroundColor(.white)
                        .padding(15)
                        .border(Color.white, width: 3)
                    
                }
                
                
                
                
            }
            .frame(width: UIScreen.screenWidth, height: topCardHeight, alignment: .top)
            .background(Color.black)
            .edgesIgnoringSafeArea(.top)
            .padding(.bottom, 0)
            
            
        }
    }
    
}

Code for the Home Screen here:

import SwiftUI
import CoreData

extension UIScreen{
    static let screenWidth = UIScreen.main.bounds.size.width
    static let screenHeight = UIScreen.main.bounds.size.height
    static let screenSize = UIScreen.main.bounds.size
}

let topCardHeight: CGFloat = 350

struct HomeView: View {
    @Environment(\.managedObjectContext) var moc
    @FetchRequest(entity: SavedPoem.entity(), sortDescriptors: []) var savedpoems : FetchedResults<SavedPoem>
    
    
    var body: some View {
        
        NavigationView{
            
        VStack {
        
            HeaderView()
            
            SavedPoemList()
            
            }
            
        }
        
        //    func remove(at offsets : IndexSet) {
        //        for index in offsets {
        //            let delete = SavedPoem[index]
        //            self.moc.delete(delete)
        //        }
        //        try? self.moc.save()
        //    }
    }

Any ideas? Thanks a lot in advance.

In SwiftUi List , We cannot remove divider , so that you have to use ScrollView instead — YodagamaHeshan, Dec 25 '20 at 00:57

score 0 · Accepted Answer · answered Dec 24 '20 at 22:10

0

You have a NavigationView in HomeView and then another one in HeaderView. I suggest you change the NavigationView in HeaderView to a VStack.

answered Dec 24 '20 at 22:10

Peter F.

176
1
11

I wanted a second navigation view in the Header View because I need a Navigation Link on the Read Now button. By tapping on the button, the user would be brought the "Poem of the day" Detail View. Do you suggest I find another way to bring the user to another view, instead of Navigation Link? – Simbeul Dec 24 '20 at 22:24
The navigation links will still work because HeaderView is inside HomeView. – Peter F. Dec 24 '20 at 22:59
Thanks, Peter. That helped. The UI problems with the list, as well as the white spacing, are still there, unfortunately. – Simbeul Dec 24 '20 at 23:39
I suggest changing the frame dimensions used for the savedpoems to simply `.frame(width: .infinity)` – Peter F. Dec 25 '20 at 00:11

score 0 · Answer 2 · answered Dec 25 '20 at 00:04

0

List has limited customization options. You should probably use LazyVStack.

answered Dec 25 '20 at 00:04

Adam

4,405
16
23

Why is my SwiftUI list styling off-centered, and with a grey background?

2 Answers2