SwiftUI Scrollview안에 GeometryReader 사용하기

SwiftUI로 UI 작업을 진행하게되면 Scrollview 안에 GeometryReader를 사용하는 경우가 나올 수 있습니다.

 

 ScrollView{
            GeometryReader{ g in
                VStack(spacing : 0){
                    Image("1")
                        .resizable()
                        .frame(width: UIScreen.main.bounds.width, height: 500)
                    Image("2")
                        .resizable()
                        .frame(width: UIScreen.main.bounds.width, height: 500)
                    Image("3")
                        .resizable()
                        .frame(width: UIScreen.main.bounds.width, height: 500)
                }
            }
        }

 

이렇게 Scrollview안에 GeometryReader 를 사용하여 실행을 해보면 결과는...!

Scrollview 안에 GeometryReader

정상적으로 스크롤이 되지 않는 문제가 있습니다.

 

흐음 이게 간단하게 말씀을 드리면

 

GeometryReader가 안에있는 아이템들을 포함을 하지만 GeometryReader의 크기 자체가

안에있는 아이템들의 크기를 모두 인식하여 GeometryReader높이가 정해져있는 상태가 아니라 

GeometryReader의 크기는 안에있는 아이템과 상관없이 0으로 지정되어있는 상태입니다.

그래서 ScrollView는 높이가 0인 아이템을 가지고있기 때문에 아래쪽으로 스크롤이 되지않는 문제가 생깁니다 

 

그렇다면 어떻게 이 문제를 해결해야할까? 간단합니다

 

ScrollView 가  GeometryReader의 높이를 알수있게 GeometryReader의 높이를 지정해주는것입니다.

 

해당 코드에서 수정하여 GeometryReader 높이를 직접 선언을 하게된다면

 

 ScrollView{
            GeometryReader{ g in
                VStack(spacing : 0){
                    Image("1")
                        .resizable()
                        .frame(width: UIScreen.main.bounds.width, height: 500)
                    Image("2")
                        .resizable()
                        .frame(width: UIScreen.main.bounds.width, height: 500)
                    Image("3")
                        .resizable()
                        .frame(width: UIScreen.main.bounds.width, height: 500)
                }
            }.frmae(height : 1500)
        }

정상적으로 스크롤뷰가 동작하는 것을 알 수 있습니다.

 

이상으로  Scrollview안에 GeometryReader 사용하는 방법에 대한 포스팅이였습니다

 

SwiftUI 관련 궁금사항이나 서로 이야기하고싶은게 있으시면 댓글남겨주세요!