[SwiftUI] ScrollView 를 알아보자

오늘은 ScrollView에 대한 간단 정리를 해볼게요오

 

ScrollVeiw 안에 추가할 다른 View를 넣어서 구현할 수 있어요.

단순하게 HStack이나 VStack으로 값을 쌓으면 잘려서 안 보이기 때문에 유용하다고 합니다!

import SwiftUI

struct ContentView: View {
    var body: some View {
        HStack {
        // Text를 사용하여 여러개 쌓아보기
            Text("1")
                .frame(width: 300, height: 500)
                .background(.red)
            Text("2")
                .frame(width: 300, height: 500)
                .background(.blue)
            Text("3")
                .frame(width: 300, height: 500)
                .background(.yellow)
    
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

HStack, VStack 

 

Text를 통해서 1, 2, 3을 입력했으나

화면에 가득차기 때문에 1, 2, 3 중에서 2만 보여요.

 

단순한 HStack, VStack 이기 때문에 옆으로, 위아래로 움직이지 않기 때문에 입력한 1, 3은 볼 수가 없습니당.

이런 경우 ScrollView 를 통해서 1, 2, 3을 모두 보여줄 수 있어요!

 

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(){
            VStack {
                Text("1")
                    .frame(width: 300, height: 500)
                    .background(.red)
                Text("2")
                    .frame(width: 300, height: 500)
                    .background(.blue)
                Text("3")
                    .frame(width: 300, height: 500)
                    .background(.yellow)
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ScrollView

 

 

 

 

 

 

 

 

 

 

 

 

ScrollView안에 View를 넣어서 쉽게 구현할 수 있어요.

 

VStack을 이용하여 ScrollView를 구현하였기 때문에

수직 방향으로 스크롤이 움직입니당.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

수평 방향으로 Scroll를 구현하고 싶다면

HStack으로 바꾸어 준 후, 스크롤 방향도 .horizontal으로 설정해주어야 해요.

스크롤 방향을 설정하지 않으면 vertical 방향 스크롤 되기 때문에 HStack으로 단순하게
쌓인 View가 수직(vertical) 방향으로 움직이는 이상한 혼종(?)이 되어버려요오...

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false){
            // showsIndicators : 밑에 좌우 스크롤의 유무
            // .horizontal : 스크롤 방향
            HStack {
                Text("1")
                    .frame(width: 300, height: 500)
                    .background(.red)
                Text("2")
                    .frame(width: 300, height: 500)
                    .background(.blue)
                Text("3")
                    .frame(width: 300, height: 500)
                    .background(.yellow)
            }.frame(maxHeight: .infinity)
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

showsImdicators

스크롤 위치도 보여주거나 안 보여주게 설정할 수 있는데

.showsIndicators를 사용하여 설정할 수 있어요.

디폴트 값이 True이기 때문에 ScrollView 구현시에 기본적으로 보이는데

.showsIndicators: false라고 설정해주면 스크롤 위치가 보이지 않아요!

 

frame

우리는 스크롤을 Vstack에서 설정해 준 width: 300, height: 500 만큼의 크기 안에서만 사용할 수 있는데

ScrollView의 크기를 .frame(maxHeight: .infinity) 로 설정 해주면 화면의 어느곳에서든 스크롤이 가능해요!

* HStack을 사용했다면 .frame(maxWidth: .infinity)가 되겠졍?

 

 

 

 

 

 

 

개발자리(리이오)님의 유튜브를 토대로 학습하였습니다!

https://www.youtube.com/watch?v=nBrqKkVZBjE&list=PL1PI2d-NlJ8tKdGK1K8gjzBQgx8M1ynPP&index=5