How to add horizontal and vertical scrolling using ScrollView

 

Hacking with Swift 사이트의 강좌 번역본입니다.

 

[원문 : https://www.hackingwithswift.com/quick-start/swiftui/how-to-add-horizontal-and-vertical-scrolling-using-scrollview]

 

How to add horizontal and vertical scrolling using ScrollView

 

SwiftUI의 ScrollView는 뷰의 스크롤되는 컨테이너를 비교적 쉽게 만들수 있도록 해주며, safe area를 피하기 위해 자동적으로 추가 insets을 추가하기 때문에, 자동적으로 크기를 컨텐츠에 맞도록 해줍니다. 

 

예를들어, 다음과 같이 10개의 텍스트 뷰의 목록 스크롤을 만들수 있습니다.

ScrollView {
    VStack(spacing: 20) {
        ForEach(0..<10) {
            Text("Item \($0)")
                .foregroundColor(.white)
                .font(.largeTitle)
                .frame(width: 200, height: 200)
                .background(Color.red)
        }
    }
}

 

스크롤 뷰는 기본적으로 수직(vertical)이지만, 첫번째 매개변수로 .hroizontal을 전달해서 축을 제어할 수 있습니다. 따라서 다음과 같이, 첫번째 예제를 수평으로 뒤집을 수 있습니다.

ScrollView(.horizontal) {
    HStack(spacing: 20) {
        ForEach(0..<10) {
            Text("Item \($0)")
                .foregroundColor(.white)
                .font(.largeTitle)
                .frame(width: 200, height: 200)
                .background(Color.red)
        }
    }
}

 

[.horizontal, .vertical]을 동시에 사용해서 두개의 축 모두 지정할 수 있습니다.

 

마지막으로, 다음과 같이 스크롤 동작이 발생할때 스크롤 인디게이터(indicators)를 보여줄지 말지를 결정할 수 있습니다.

ScrollView(.horizontal, showsIndicators: false) {