Is it possible to make the LazyVGrid header have the same appearance as a List header

Question

Goal My goal is to make the LazyVGrid header look exactly the same as the List header. When utilizing the Grid view, the header is transparent and shows the content as it scrolls behind it.

I have tried explicitly adding a background to the header, however, it looks inconsistent when the scrollview is at the top and the nav bar has no background.

Below are the two relevant snippets of code

List

List {
    Section(header: Header()) {
        if let palettes = wledDevice.palettes {
            ForEach(palettes, id: \.self) { palette in
                ItemRow(item: Text(palette), selected: wledDevice.activePalette == palette)
                    .onTapGesture {
                        print(palette)
                        wledDevice.activePalette = palette
                    }
            }
        }
    }
    .padding(.horizontal)
}

LazyVGrid

let layout = [GridItem(.adaptive(minimum: 300))]
        
ScrollView {
    LazyVGrid(columns: layout, spacing: vGridSpacing, pinnedViews: .sectionHeaders) {
        Section(header: Header()) {
            if let palettes = wledDevice.palettes {
                ForEach(palettes, id: \.self) { palette in
                    ItemRow(item: Text(palette), selected: wledDevice.activePalette == palette)
                        .onTapGesture {
                            wledDevice.activePalette = palette
                        }
                }
            }
        }
        .padding(.horizontal)
    }
}

Answer 1

Ultimately, I was able to achieve the desired effect by wrapping the grid view in a list (as shown below). If there is a better way to do this, feel free to include another answer.

List {
    Section(header: Header()) {
        LazyVGrid(columns: layout, spacing: vGridSpacing) {
            if let palettes = wledDevice.palettes {
                ForEach(palettes, id: \.self) { palette in
                    ItemRow(item: Text(palette), selected: wledDevice.activePalette == palette)
                        .onTapGesture {
                            print(palette)
                            wledDevice.activePalette = palette
                        }
                }
            }
        }
        .padding(.horizontal)
    }
}