SwiftUI ScrollView 滚动到相对位置

Posted 2023-04-19

【中文标题】SwiftUI ScrollView 滚动到相对位置

【英文标题】：SwiftUI ScrollView Scroll to Relative Position

【发布时间】：2021-08-01 21:46:00

【问题描述】：

我有一个不适合屏幕的大水平视图，因此我将其放入水平视图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.")
        
    

【参考方案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)
                
            
        
    

【讨论】：

太棒了！非常感谢。

【参考方案2】：

使用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)