Search code examples
iosswiftswiftuinavigation

How to remove padding from the left side of list of navigation links? SwiftUI


I am developing an app in where there is a list of navigation links which are images. I want the image to be the full width of the screen but there is padding from the left. I have tried several things:

 .frame( maxWidth: .infinity)
 .ignoresSafeArea()
 .listStyle(PlainListStyle())
NavigationView {
            
            VStack {
                
                Text("Available guides in: ").padding(.bottom, -1000).padding(.top,100).font(.custom("SF Mono-Light", size: 28)).edgesIgnoringSafeArea(.all)//.foregroundColor(Color.white)
                
                Text("Somewhere").padding(.bottom, -90).padding(.top,-70).font(.custom("SF Mono-Light", size: 32))//.foregroundColor(Color.white)//.edgesIgnoringSafeArea(.all)
                
                List {
                    ForEach(guides) { guide in
                        NavigationLink(destination: GuideView(guideSessionManager: GuideSessionManager(guide: guide)), tag : guide.guideName, selection: $selection) {
                            Button(action: {
                                selection = guide.guideName
                            }) {
                                Image(guide.imageName)
                                .renderingMode(Image.TemplateRenderingMode?.init(Image.TemplateRenderingMode.original))
                            }.buttonStyle(GrowingButtonImage())
                            .frame( maxWidth: .infinity)
                            .ignoresSafeArea()
                            
                        }
                        .frame( maxWidth: .infinity)
                        .listRowInsets(EdgeInsets())
                        .ignoresSafeArea()
                        
                    }
                }
                .frame( maxWidth: .infinity)
                .ignoresSafeArea()
                .listStyle(PlainListStyle())

enter image description here

 .frame( maxWidth: .infinity)
 .ignoresSafeArea()
 .listStyle(PlainListStyle())

Solution

  • You're giving it EdgeInsets without parameters and setting the width to .infinity with .ignoresSafeArea, which causes a weird interaction. Either remove .ignoresSafeArea, use parameters on EdgeInsets or don't use .infinity

                    List {
                        ForEach(guides) { guide in
                            NavigationLink(destination: GuideView(guideSessionManager: GuideSessionManager(guide: guide)), tag : guide.guideName, selection: $selection) {
                                Button(action: {
                                    selection = guide.guideName
                                }) {
                                    Image(guide.imageName)
                                    .renderingMode(Image.TemplateRenderingMode?.init(Image.TemplateRenderingMode.original))
                                }
                                .buttonStyle(GrowingButtonImage())
                                .frame( maxWidth: .infinity)
                                .edgesIgnoringSafeArea(.all)
                                
                            }
                            // Modify these to your liking
                            .listRowInsets(EdgeInsets(top: 0.0, leading: 0.0, bottom: 0.0, trailing: 0.0))                        
                        }
    

    You can also try using .scaledToFill()