SwiftUI ScrollView 滚动到相对位置

问题描述

我有一个大的水平视图，无法显示在屏幕上，所以我把它放到了一个水平 ScrollView 中。 如果 0 代表完全向左滚动，1 代表完全向右滚动 - 我怎么能，例如滚动到 0.8 的相对位置？

由于我无法将 id 附加到子元素 ScrollViewReader 似乎不起作用。

struct ContentView: View {

    var body: some View {
        ScrollView(.horizontal) {
            Text("Example for a long view without individual elements that you Could use id on. Example for a long view without individual elements that you Could use id on. Example for a long view without individual elements that you Could use id on. Example for a long view without individual elements that you Could use id on. Example for a long view without individual elements that you Could use id on. Example for a long view without individual elements that you Could use id on. Example for a long view without individual elements that you Could use id on. Example for a long view without individual elements that you Could use id on. Example for a long view without individual elements that you Could use id on. Example for a long view without individual elements that you Could use id on.")
        }
    }
}

解决方法

使用 SwiftUI-Introspect，用于“从 SwiftUI 内省底层 UIKit 组件”，我们可以实现这一点。

这是它的完成方式，并附有一个 Slider 以证明其工作：

struct ContentView: View {
    @State private var relativePosition: CGFloat = 0.5
    
    var body: some View {
        VStack {
            ScrollView(.horizontal) {
                Text("Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on.")
            }
            .introspectScrollView { scrollView in
                let width = scrollView.contentSize.width - scrollView.frame.width
                scrollView.contentOffset.x = relativePosition * width
            }
            
            let _ = relativePosition  // Needed to update view
            
            Slider(value: $relativePosition,in: 0 ... 1)
        }
    }
}

,

您可以在纯 SwiftUI 中使用带有不可见背景视图的 ZStack 解决此问题：

struct ContentView: View {
    
    var body: some View {
        ScrollViewReader { reader in
            ScrollView(.horizontal) {
                ZStack {
                    HStack {
                        ForEach(0..<100) { i in
                            Spacer().id(i)
                        }
                    }
                    Text("Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on. Example for a long view without individual elements that you could use id on.")
                }
            }
            Button("Go to 0.8") {
                withAnimation {
                    reader.scrollTo(80)
                }
            }
        }
    }
}