개발/Swift

[SwiftUI] ScrollViewReader & ScrollViewProxy | 스크롤뷰 리더, 프록시

leebaek 2023. 11. 8. 20:00

ScrollView 🔗

 ScrollViewReader

 ScrollViewProxy


 ScrollViewReader

: 하위 뷰로 스크롤하기 위해 프록시와 작업하여 프로그래밍 방식 스크롤을 제공하는 뷰 

@frozen 
struct ScrollViewReader<Content> where Content : View

 

- 내부에서 생성된 작업만 제스처 핸들러나 뷰의 메서드와 같은 프록시를 호출할 수 있음


 ScrollViewProxy

: 뷰 계층 구조 내에서 스크롤 가능한 뷰의 프로그래밍 방식 스크롤을 지원하는 프록시 값

struct ScrollViewProxy

 

- ScrollViewProxy 인스턴스를 직접 생성하지 않고, ScrollViewReader의 뷰 빌더에서 인스턴스를 받음 

- 버튼, 제스처 핸들러 또는 onChange() method와 같은 작업을 사용하여 프록시의 scrollTo() method를 호출함


proxy.scrollTo(id) 🔗

-id에 저장된 객체로 스크롤 뷰 이동

withAnimation {
	proxy.scrollTo(bottomID)
}

ex.

- Scroll to Bottom을 누르면 스크롤 뷰 아래로 이동

- Top을 누르면 스크롤뷰 위로 이동

 

@Namespace var topID // 스크롤 뷰 위의 프로퍼티를 포함하는 객체의 id
@Namespace var bottomID // 스크롤 뷰 아래의 프로퍼티를 포함하는 객체의 id


var body: some View {
    ScrollViewReader { proxy in
        ScrollView {
            Button("Scroll to Bottom") {
                withAnimation {
                    proxy.scrollTo(bottomID) // 버튼 클릭시 bottom으로 스크롤 뷰 이동
                }
            }
            .id(topID)


            VStack(spacing: 0) {
                ForEach(0..<100) { i in
                    Text("\(i)")
                }
            }


            Button("Top") {
                withAnimation {
                    proxy.scrollTo(topID) // 버튼 클릭시 top으로 스크롤 뷰 이동
                }
            }
            .id(bottomID)
        }
    }
}
.id(topID) // topID에 해당 객체 저장
.id(BottomID) // BottomID에 해당 객체 저장