← 아카이브로 돌아가기

Development · SwiftUI

SwiftUI ScrollView의 방향과 표시 옵션

수직·수평 스크롤 방향과 스크롤 표시기 옵션을 지정하고 콘텐츠를 배치하는 방법을 정리합니다.

Velog 원문 보기 ↗

Development 아카이브 표지

화면보다 긴 콘텐츠를 담는 순간 ScrollView가 필요해진다. 기본 수직 방향에서 시작해 가로 스크롤과 표시기 설정까지 가장 작은 예제로 확인했다.

Vertical

ScrollView는 기본적으로 수직 방향이다. VStack, ForEach를 활용하여 반복되는 동일한 뷰를 표현할 수 있다.

ScrollView { // 수직 방향 스크롤 뷰
	VStack {
		ForEach(0..<20) { index in
			Rectangle()
				.fill(Color.blue)
				.frame(height: 200)
		}
	}
}

Horizontal

axes 파라미터를 전달하여 ScrollView를 수평 방형으로 변경할 수 있다. showsIndicators 파라미터를 전달하여 스크롤바를 숨길 수 있다.

// 수평 방향 스크롤 뷰, 스크롤 바 숨김
ScrollView(.horizontal, showsIndicators: false, content: {
	HStack {
		ForEach(0..<20) { index in
			Rectangle()
				.fill(Color.blue)
				.frame(width: 300)
		}
	}
})
← 아카이브로 돌아가기