1

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
                    )
            }
        }
}
}

enter image description here

John Gerard
  • 299
  • 4
  • 19
  • Are you sure "...Everything works fine, ...". I noticed that you have `@StateObject var authVM = AuthorizationClass()` in `ProjectsList` and at the same time you pass in `ProjectsList(authVM: authVM)`. You probably want `@ObservedObject var authVM: AuthorizationClass` in `ProjectsList`. You probably do the same in `ProjectsLoader(authVM: authVM)`. – workingdog support Ukraine Dec 01 '21 at 03:49
  • 1
    In `ProjectsList`, you could try adding `.listStyle(.plain)` to the list to make it full width. Try also `Spacer().frame(height: 20)` instead of `Spacer().frame(height: 100)` just after the Button in `ConsumerDashboardView` to reduce the "top margin". – workingdog support Ukraine Dec 01 '21 at 04:04
  • @workingdog that worked, thanks. I had to update my XCode to the latest version though to get the .liststyle(.plain) modifier to work. – John Gerard Dec 04 '21 at 16:28

0 Answers0