swiftui list with custom header

Question

I want to set a image header for list in swiftui. The effect I want is shown in the figure below:

However, I can not remove padding in this image row. My code is as bellow:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Section() {
                    Image("HeadImage")
                        .resizable()
                        .frame(height: 150)
                }
                ForEach((0..<4), id: \.self) { index in
                    Section {
                        NavigationLink(destination: Text("aaa")) {
                            Label("Buttons", systemImage: "capsule")
                        }
                        NavigationLink(destination: Text("aaa")) {
                            Label("Colors", systemImage: "paintpalette")
                        }
                        NavigationLink(destination: Text("aaa")) {
                            Label("Controls", systemImage: "slider.horizontal.3")
                        }
                    }
                }
            }
            .navigationBarTitle("SwiftUI")
            .navigationBarTitleDisplayMode(.inline)
        }
        .accentColor(.accentColor)
    }
}

But the image row has a padding as bellow:

Is there any method to remove this padding?

Have you tried setting the aspect to `.fill`? or on the `Section{}` add `.edgesIgnoringSafeArea()` — xTwisteDx, Jul 21 '22 at 14:48

score 13 · Accepted Answer · answered Jul 21 '22 at 14:49

13

It is row insets, they can be turned off as below

Section() {
    Image("HeadImage")
        .resizable()
        .frame(height: 150)
        .listRowInsets(EdgeInsets())    // << here !!
}

Tested with Xcode 14 / iOS 16

answered Jul 21 '22 at 14:49

Asperi

228,894
20
464
690

That's it! You are super man! – mars Jul 21 '22 at 14:55
I add a new question. Can you spare time to help me have a look? – mars Jul 21 '22 at 15:41
@mars that is not how SO works, if you have a follow up question you should make a new post. – EmilioPelaez Jul 21 '22 at 15:49
I tried, but it can only post a question every 90 minute... I will post it later – mars Jul 21 '22 at 15:58
@asperi Here is the new question https://stackoverflow.com/questions/73074069/swiftui-list-with-custom-image-header – mars Jul 22 '22 at 03:14

swiftui list with custom header

1 Answers1