我有 ScrollView,它利用 ScrollReader 滚动到具有特定 ID 的视图:
withAnimation(.linear(duration: animationDuration)) {
scrollViewReader.scrollTo(
tab.id,
anchor: .top
)
}
一切似乎都按预期工作,但这里的问题是我想滚动到 .top + 50 偏移量。
原因是我有一个大 ScrollView,带有一个粘性栏(选项卡),每个选项卡都有部分。 ScrollView 位于粘性栏下方以获得特定的模糊效果,因此当滚动到 .top 时,视图的顶部隐藏在粘性栏下方。这就是为什么我需要偏移量。
一个解决方案将创建一个占位符视图并将它们添加到各部分之间,以便我可以滚动到那里,但这似乎是一种解决方法,在探索这种解决方案之前,我想知道是否有更好的方法,因为我不敢相信 ScrollViewReader 不这样做没有这个功能。
您也许可以对
ScrollView
内的视图应用 y 偏移,然后对 ScrollView
本身应用负填充以进行补偿。
这是一个展示其工作原理的示例:
struct ContentView: View {
let colors: [Color] = [.red, .orange, .yellow, .green, .blue, .indigo, .purple]
var body: some View {
ScrollViewReader { scrollViewReader in
ScrollView {
VStack(spacing: 0) {
ForEach(Array(colors.enumerated()), id: \.offset) { index, color in
color
.frame(height: 250)
.id(index)
.offset(y: 50)
.onTapGesture {
withAnimation(.linear(duration: 1)) {
scrollViewReader.scrollTo(
index,
anchor: .top
)
}
}
}
}
}
.overlay(alignment: .top) {
Text("TAB AREA")
.font(.largeTitle)
.foregroundStyle(.white)
.frame(height: 50)
.frame(maxWidth: .infinity)
.background(Color.black.opacity(0.5))
}
.padding(.bottom, -50)
}
}
}
如果这不适合您的目的,那么也许您可以提供一个更详细的(工作)示例来更详细地说明您的特定问题?