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

Question

This question already has an answer here:
SwiftUI disable list border iOS 14 [duplicate]
(1 answer)
Closed 2 years ago.
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.

Answer 1

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

Answer 2

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