I have a SwiftUI app with a Navigation View. Inside that Navigation View is a List. The List contains Navigation Links. Everything works fine, but I'd like each List item to stretch out to the full width of the view and not have that gray margin all the way around it.
How do I make the List the full width and also eliminate top margin?
import SwiftUI
struct ConsumerDashboardView: View {
@StateObject var authVM = AuthorizationClass()
var body: some View {
NavigationView {
VStack{
Spacer()
.frame(height: 50)
Button(action: {
print("Button Clicked")
}){
Text("\(Image(systemName: "plus")) Start a New Project")
.font(.headline)
.fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
.foregroundColor(.white)
.padding()
.frame(width: 300, height: 60)
.background(Color("BrandOrange"))
.cornerRadius(5.0)
}
Spacer()
.frame(height: 100)
VStack(spacing: -2){
HStack{
Text(" Active\nProjects")
.font(.headline)
.fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
.frame(
width: 120,
height: 60,
alignment: .center
)
.background(Color("BrandLightBlue"))
.foregroundColor(.white)
.padding(.trailing, 50)
Text(" Closed\nProjects")
.font(.headline)
.fontWeight(/*@START_MENU_TOKEN@*/.bold/*@END_MENU_TOKEN@*/)
.frame(
width: 120,
height: 60,
alignment: .center
)
.border(Color("BrandLightBlue"), width: 2)
.background(Color(.white))
.foregroundColor(Color("BrandLightBlue"))
}
Divider()
.frame(
width: 1000,
height: 3
)
.background(Color("BrandLightBlue"))
Spacer()
if !authVM.projectObjects.isEmpty {
ProjectsList(authVM: authVM)
} else {
ProjectsLoader(authVM: authVM)
}
}
}
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .principal) {
HStack {
Image("Icon")
.resizable()
.frame(
width: 30,
height: 30
)
Text("Icon").font(.headline)
Image(systemName: "line.3.horizontal.decrease.circle")
.imageScale(.large)
}
}
}
}.onAppear {
authVM.fetchProjects()
}
}
}
struct ProjectsList: View {
@StateObject var authVM = AuthorizationClass()
var body: some View {
List(authVM.projectObjects){ projectObject in
NavigationLink(destination: ProjectDetailView(project: projectObject.project)){
ProjectRowView(project: projectObject.project)
.frame(
height: 150
)
}
}
}
}