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())
.frame( maxWidth: .infinity)
.ignoresSafeArea()
.listStyle(PlainListStyle())
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()