swiftui list with custom image header

Question

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

My code is as bellow:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Section() {
                    VStack() {
                        Image("HeadImage")
                            .resizable()
                            .frame(width: 50, height: 50)
                        Text("Test word")
                            .foregroundColor(Color.red)
                    }
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .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)
    }
}

The result is as bellow, the header view has a white background:

I find a method to set the image row backgroud color as bellow:

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            List {
                Section() {
                    VStack() {
                        Image("HeadImage")
                            .resizable()
                            .frame(width: 50, height: 50)
                        Text("Test word")
                            .foregroundColor(Color.red)
                        
                    }
                    .frame(minWidth: 0, maxWidth: .infinity)
                    .frame(height: 150)
                    .listRowInsets(EdgeInsets())
                    // rgb get from screenshot of List in Sketch
                    .background(Color(red: 242/255, green: 242/255, blue: 247/255))
                }
                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)
    }
}

This can make the image row to same background color with the List.

But this way is to set a fixed color, which is the RGB value of the background color of the List obtained by using the color finder in Sketch. It is not a very beautiful method. Is there a more elegant way to set the background color of the image row to be the same as the background color of the List?

Answer 1

It can be done making list row background transparent, like

Section() {
    VStack() {
        Image("HeadImage")
            .resizable()
            .frame(width: 50, height: 50)
        Text("Test word")
            .foregroundColor(Color.red)

    }
    .frame(minWidth: 0, maxWidth: .infinity)
    .frame(height: 150)
    .listRowInsets(EdgeInsets())
    .listRowBackground(Color.clear)     // << here !!

Tested with Xcode 13.4 / iOS 15.5