是否可以使 LazyVGrid header 具有与列表相同的外观 header

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

目标 我的目标是使 LazyVGrid header 看起来与列表 header 完全一样。使用网格视图时,header 是透明的并在其后面滚动时显示内容。

我已经尝试明确地向 header 添加背景,但是,当滚动视图位于顶部且导航栏没有背景时,它看起来不一致。

下面是两个相关的代码片段

列表

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)
    }
}

最终,我能够通过将网格视图包装在列表中来达到预期的效果(如下所示)。如果有更好的方法,请随时包含另一个答案。

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)
    }
}