SwiftUI - ScrollView 滚动到带有偏移量的特定 ID

问题描述 投票:0回答:1

我有 ScrollView,它利用 ScrollReader 滚动到具有特定 ID 的视图:

withAnimation(.linear(duration: animationDuration)) {
    scrollViewReader.scrollTo(
        tab.id,
       anchor: .top
    )
}

一切似乎都按预期工作,但这里的问题是我想滚动到 .top + 50 偏移量。

原因是我有一个大 ScrollView,带有一个粘性栏(选项卡),每个选项卡都有部分。 ScrollView 位于粘性栏下方以获得特定的模糊效果,因此当滚动到 .top 时,视图的顶部隐藏在粘性栏下方。这就是为什么我需要偏移量。

一个解决方案将创建一个占位符视图并将它们添加到各部分之间,以便我可以滚动到那里,但这似乎是一种解决方法,在探索这种解决方案之前,我想知道是否有更好的方法,因为我不敢相信 ScrollViewReader 不这样做没有这个功能。

swift swiftui scrollview scrollviewreader
1个回答
0
投票

您也许可以对

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

Animation

如果这不适合您的目的,那么也许您可以提供一个更详细的(工作)示例来更详细地说明您的特定问题?

© www.soinside.com 2019 - 2024. All rights reserved.