是否可以使 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)
}
}
目标 我的目标是使 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)
}
}