如何滚动到swiftui

Question

struct Example: View {

    private static let topId = "topIdHere"

    /*
      Use only for toggling, binding for external access or @State for internal access
    */
    @Binding var shouldScrollToTop: Bool = false 

    var body: some View {

        ScrollViewReader { reader in  // read scroll position and scroll to
            ScrollView { 
                VStack {
                   TopView() // << first view on top
                    .id(Self.topId) // << assigned id (use for scroll)
                }
                .onChange(shouldScrollToTop) { _ in 
                    withAnimation {  // add animation for scroll to top
                       reader.scrollTo(Self.topId, anchor: .top) // scroll
                    }
                }
            }
        }
    }
}

Answer 1

我认为目前最好的方法是使用视图的ID函数

teclare具有唯一ID

的状态var

Answer 2

然后将ID函数添加到scrollview

1. ScrollView(.horizontal, showsIndicators: true) {
   // ...
   }.id(self.scrollViewID)

当您更改该ID时 - 例如在按钮事件中 - 滚动视图是从头开始重建的 - 就像滚动到top

2. 刚刚出版了

   ScrollViewProxy
。

代理值允许在视图层次结构中以编程方式滚动的滚动视图。 -

https：//developer.apple.com/documentation/swiftui/scrollviewproxy

Answer 3

XCode 12.0 beta（12A6159）

滚动到顶部的方式：

struct MyView: View {
    @State var scrollToTopVar = false

    var body: some View {
        VStack {

            //will scroll to top on button press
            Button("Scroll to top") { scrollToTopVar.toggle() }
            
            ScrollViewReader { reader in
                ScrollView { 
                    ScrollerToTop(reader: reader, scrollOnChange: $scrollToTopVar)

                    VStack {
                        //Some Views
                    }
                }
            }

        }
    }
}

///

SCrollerTopop代码：

Answer 4

ScrollViewReader { proxy in
    ScrollView {
        content
            .id("content")
    }
    .onChange(of: store.step) { // some state change triggers scroll
        proxy.scrollTo("content", anchor: .top)
    }
}

有一个解决方法，可以通过在显示新内容之前隐藏所有内容来完成scrolltotop（）效果。

@State var hideEverything = false

var body: some View {
  ScrollView {
    if hideEverything {
      EmptyView()
    } else {
      // your content view
    }
  }
}

func ScrollToTop() {
  self.hideEverything = true
  DispatchQueue.main.asyncAfter(deadline: .now() + 0.01)  
  {  
    self.data = ... // update data source
    self.hideEverything = false
  }
}

Answer 5

I找到了有关如何在Apple开发人员页面上滚动到我视图的完整信息：

Https：//developer.apple.com/documentation/swiftui/scrollviewReader

Answer 6

在我需要滚动列表中的项目时，我需要滚动到视图的顶部。我遵循了苹果的榜样，并用

ScrollViewReader

：

包裹了滚动视图。

@Namespace var topID

var body: some View {
  
  ScrollViewReader { proxy in
    VStack {
      
      Section {
        //
        //
      }
      .id(topID)
      
      ForEach(Array(...)) { index, xxx in
        Section {
          //
          //
        }
        .onTapGesture {
          withAnimation {
            proxy.scrollTo(topID)
          }
        }
      } //ForEach
    } //VStack
  } //ScrollViewReader
} //body

Answer 7

课程从iOS 14.0及以后您应该使用

ScrollViewProxy

，绝对是出于此原因而开发的。

但是，如果您检查何时问问题，您将定义答案是针对

IOS13.0，SwiftUi1.0

，在此时间点，您必须以某种方式重新发明自行车：使用this

Answer 8

ScrollView.content.offset

struct ScrollToTheTop: View {
    
    @State private var verticalOffset: CGFloat = 0.0
    @State private var gestureOffset: CGFloat = 0.0
    @State private var itemCount: Int = 200
    
    var body: some View {
        
        NavigationView {
            VStack {
                
                ScrollView(.vertical, showsIndicators: false) {
                    
                    VStack {
                        
                        ForEach(1...itemCount, id: \.self) { item in
                            Text("--- \(item) ---") // height 17.5
                        }
                        
                    }
                    
                }
                .content.offset(y: (self.verticalOffset + self.gestureOffset)
                    // all the content divided by 2 for zero position of scroll view
                    + CGFloat(17.5 * Double(self.itemCount/2)))
                    .gesture(DragGesture().onChanged( { value in
                        self.gestureOffset = value.translation.height
                    }).onEnded( { value in
                        withAnimation {
                            // here should calculate end position with value.predictedEndLocation.y
                            self.verticalOffset += value.translation.height
                            self.gestureOffset = 0.0
                        }
                    }))
                
                
            }.navigationBarItems(trailing: Button("To top!") {
                withAnimation {
                    self.verticalOffset = 0.0
                }
            })
        }
        
    }
    
}

如果适合此示例，您必须完善

DragGesture