swiftui list with custom image header - swiftui

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