ScrollViewReader to auto scroll in SwiftUI | Continued Learning #5
.onChange(of: scrollToIndex, perform: { value in
proxy.scrollTo(value, anchor: .center)
})
onChange
를 통해 현재 이동하고자 하는 인덱스 값의 변화 여부를 알아낸 뒤 proxy
로 해당 아이템의 인덱스로 이동한다.anchor
의 옵션은 top
, center
, bottom
등이 있는데, 프록시를 통해 이동한 뒤 그 아이템이 화면 상에서 보이는 위치가 위/중간/아래인지를 결정한다.import SwiftUI
struct ScrollViewReaderBootCamp: View {
@State private var textFieldText: String = ""
@State private var scrollToIndex: Int = 0
var body: some View {
VStack {
TextField("Enter a # here...", text: $textFieldText)
.frame(height: 55)
.border(.gray)
.padding(.horizontal)
.keyboardType(.numberPad)
Button("SCROLL NOW") {
withAnimation(.spring()) {
if let index = Int(textFieldText) {
scrollToIndex = index
}
}
}
ScrollView {
ScrollViewReader { proxy in
ForEach(0..<50) { index in
Text("This is item #\(index)")
.font(.headline)
.frame(height: 200)
.frame(maxWidth: .infinity)
.background(.white)
.cornerRadius(10)
.shadow(radius: 10)
.padding()
.id(index)
}
.onChange(of: scrollToIndex, perform: { value in
proxy.scrollTo(value, anchor: .center)
})
}
}
}
}
}