Devlog
article thumbnail
Published 2021. 8. 23. 00:02
[SwiftUI fundamental Tutorial] Stack 강의/etc

위 글은 유튜브 정대리님의 SwiftUI fundamental Tutorial 강좌를 보고 작성한 정리글로

자세한 내용은 유튜브를 통해 확인하시길 권장합니다. 

 

 

 

 

 

VStack

import SwiftUI

struct ContentView:View {
    var body:some View{
        VStack{

            Text("ㅎㅇ")
                .font(.system(size: 30))
                .fontWeight(.heavy)
        
            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.red)
        
            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.yellow)
        
            Rectangle()
                    .frame(width:100, height:100)
                    .foregroundColor(Color.blue)
    
        }

        .frame(width: 300)
        .background(Color.green)
        
        }
    }

frame()의 default 값: 화면 전체를 다 채움

쉽게 생각하면 frame=크기: .frame(width: 300)

 

 

 

 

 

import SwiftUI

struct ContentView: View{
	var body: some View{

	VStack(alignment: .trailing, spacing: 50){

            Text("ㅎㅇ")
                .font(.system(size: 30))
                .fontWeight(.heavy)
        
            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.red)

            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.yellow)
        

            Rectangle()
                    .frame(width:100, height:100)
                    .foregroundColor(Color.blue)
        

        }

        .frame(width: 300)
        .background(Color.green)

        }
    }

spacing: 스택 안의 요소들에게 간격을 부여할 수 있음

alignment: (글자가 채워진 만큼) 정렬

VStack(alignment: .trailing, spacing: 50){

 

}

 

 

 

 

 

 

 

VStack이나 HStack 안에서 완전히 정렬하고 싶을때 여러가지 방법이 있음

 

 

1. Divider() 사용

import SwiftUI

struct ContentView: View{
	var body: some View{

	VStack(alignment: .trailing, spacing: 50){

            Text("ㅎㅇ")
                .font(.system(size: 30))
                .fontWeight(.heavy)
                
            Divider()
        
            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.red)

            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.yellow)
        

            Rectangle()
                    .frame(width:100, height:100)
                    .foregroundColor(Color.blue)
        

        }

        .frame(width: 300)
        .background(Color.green)

        }
    }

 

 

Divider() 사용시 주의할 점: 실선의 테두리가 보임

 

실선 테두리를 없애기 위해서는 Divider()의 .opacity(0) 부여

import SwiftUI

struct ContentView: View{
	var body: some View{

	VStack(alignment: .trailing, spacing: 50){

            Text("ㅎㅇ")
                .font(.system(size: 30))
                .fontWeight(.heavy)
                
            Divider()
            	.opacity(0)
        
            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.red)

            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.yellow)
        

            Rectangle()
                    .frame(width:100, height:100)
                    .foregroundColor(Color.blue)
        

        }

        .frame(width: 300)
        .background(Color.green)

        }
    }

실선 없어짐

 

 

 

 

 

2. empty View 넣기

import SwiftUI

struct ContentView: View{
	var body: some View{

	VStack(alignment: .trailing, spacing: 50){

			Rectangle()
            	.frame(height: 1)
			
            Text("ㅎㅇ")
                .font(.system(size: 30))
                .fontWeight(.heavy)
        
            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.red)

            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.yellow)
        

            Rectangle()
                    .frame(width:100, height:100)
                    .foregroundColor(Color.blue)
        

        }

        .frame(width: 300)
        .background(Color.green)

        }
    }

 

 

 

 

 

 

3. 요소들마다 개별적으로 padding 부여

코드 생략

 

등등 여러가지 방법이 존재함

 

 

 

 

 

 

import SwiftUI

struct ContentView: View{
	var body: some View{

	VStack(alignment: .trailing, spacing: 50){

            Text("ㅎㅇ")
                .font(.system(size: 30))
                .fontWeight(.heavy)
                
            Divider()
            	.opacity(0)
        
            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.red)

            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.yellow)
        

            Rectangle()
                    .frame(width:100, height:100)
                    .foregroundColor(Color.blue)
        
        
            Spacer()

        }

        .frame(width: 300)
        .background(Color.green)

        }
    }

Spacer(): 가중치 부여

 

 

 

 

 

import SwiftUI

struct ContentView: View{
	var body: some View{

	VStack(alignment: .trailing, spacing: 50){

           Spacer()

            Text("ㅎㅇ")
                .font(.system(size: 30))
                .fontWeight(.heavy)
                
            Divider()
            	.opacity(0)
        
            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.red)

            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.yellow)
        

            Rectangle()
                    .frame(width:100, height:100)
                    .foregroundColor(Color.blue)
        
        
            Spacer()

        }

        .frame(width: 300)
        .background(Color.green)

        }
    }

Spacer()를 위아래 둘 다 두면 위 아래 둘 다 가중치가 부여되어 요소들이 중간으로 배치 (비율에 따라)

 

 

 

 

 

 

import SwiftUI
	struct ContentView: View{
    	var body: some View
    
    	VStack(alignment: .trailing, spacing: 0){
        
            Divider().opacity(0) //frame 테두리 없애기
        
            Text("ㅎㅇ")
                .font(.system(size: 30))
                .fontWeight(.bold)
        
            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.red)
        
            Rectangle()
                .frame(width:100, height:100)
                .foregroundColor(Color.yellow)
        
            Spacer()
                .frame(height:50)
        
            Rectangle()
                    .frame(width:100, height:100)
                    .foregroundColor(Color.blue)
        
        }

        .frame(width: 300)
        .background(Color.green)
        
        }
    }

Spacer() 속성 값 부여 가능

 

 

 

 

 

HStack

(앞의 VStack과 별 차이는 없음)

import SwiftUI

struct MyHstack : View{
    var body : some View{
        
        HStack(alignment: .center){
        
        	Divider()
            
            Rectangle()
            	.frame(width: 100, height:100)
                .foregroundColor(.red)
            
            Rectangle()
                .frame(width: 100, height:100)
                .foregroundColor(.yellow)
            
            Rectangle()
                .frame(width: 100, height:100)
                .foregroundColor(.blue)
        }
        .background(Color.green)
    }
}

 

Divider()로 배경이 늘어남

 

 

 

import SwiftUI

struct MyHstack : View{
    var body : some View{
        
        HStack(alignment: .center){
            
            Rectangle()
                .frame(width: 100)
                .foregroundColor(.white)
            
            Rectangle()
                .frame(width: 100, height:100)
                .foregroundColor(.red)
            
            Rectangle()
                .frame(width: 100, height:100)
                .foregroundColor(.yellow)
            
            Rectangle()
                .frame(width: 100, height:100)
                .foregroundColor(.blue)
        }
        .padding()
        .background(Color.green)
    }
}

하얀색 사각혐 fram()에 height 값을 지정하지 않아서 배경 크기 만큼 늘어나는 것을 확인 할 수 있음

 

 

 

import SwiftUI

struct MyHstack : View{
    var body : some View{
        
        HStack(alignment: .center){
            
            Image(systemName: "flame.fill")
                .foregroundColor(.red)
                .font(.system(size:70))
            
            Rectangle()
                .frame(width: 100, height:100)
                .foregroundColor(.yellow)
            
            Rectangle()
                .frame(width: 100, height:100)
                .foregroundColor(.blue)
        }
        .padding()
        .background(Color.green)
    }
}

사각형 대신 이미지를 넣어서 활용할 수 있음

 

 

 

 

 

 

ZStack

Z축으로 깊이(중첩)를 설정할 수 있음

import SwiftUI

struct MyZstack : View{
    var body : some View{
        
        ZStack{
            
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.red)
            
           Rectangle()
                .frame(width: 200, height: 200)
                .foregroundColor(Color.yellow)
        }
    }
}

빨간색 사각형을 노란색 사각형이 덮은 상태

코드 아래쪽으로 갈 수록 덮어 씌운다고 생각하면 됨

 

 

import SwiftUI

struct MyZstack : View{
    var body : some View{
        
        ZStack{
            
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.red)
            
           Rectangle()
                .frame(width: 50, height: 50)
                .foregroundColor(Color.yellow)
        }
    }
}

 

 

 

 

import SwiftUI

struct MyZstack : View{
    var body : some View{
        
        ZStack{
            
            Rectangle()
                .frame(width: 50, height: 50)
                .foregroundColor(Color.yellow)
            
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.red)
            
            Rectangle()
                .frame(width: 150, height:150)
                .foregroundColor(Color.blue)
        }
    }
}

깊이 순서 설정 전

 

import SwiftUI

struct MyZstack : View{
    var body : some View{
        
        ZStack{
            
            Rectangle()
                .frame(width: 50, height: 50)
                .foregroundColor(Color.yellow)
                .zIndex(2)
            
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.red)
                .zIndex(1)
            
            Rectangle()
                .frame(width: 150, height:150)
                .foregroundColor(Color.blue)
                .zIndex(0)
        }
    }
}

zIndex(): ZStack의 깊이 순서 설정, 계층이라고 생각

zIndex(0)= zIndex를 사용하기 전이랑 같음

 

깊이 설정 후

 

기타 설정

import SwiftUI

struct MyZstack : View{
    var body : some View{
        
        ZStack{
            
            Rectangle()
                .frame(width: 50, height: 50)
                .foregroundColor(Color.yellow)
                .zIndex(2)
                .padding(.bottom, 100)
            
            
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.red)
                .zIndex(1)
            
            Rectangle()
                .frame(width: 150, height:150)
                .foregroundColor(Color.blue)
                .zIndex(0)
        }
    }
}

padding() 설정

import SwiftUI

struct MyZstack : View{
    var body : some View{
        
        ZStack{
            
            Rectangle()
                .frame(width: 50, height: 50)
                .foregroundColor(Color.yellow)
                .zIndex(2)
//                .padding(.bottom, 100)
                .offset(y: -100)
            
            
            Rectangle()
                .frame(width: 100, height: 100)
                .foregroundColor(Color.red)
                .zIndex(1)
            
            Rectangle()
                .frame(width: 150, height:150)
                .foregroundColor(Color.blue)
                .zIndex(0)
        }
    }
}

offset(y: -100) 설정

 

'강의 > etc' 카테고리의 다른 글

[SwiftUI fundamental Tutorial] List  (0) 2021.08.23
[SwiftUI fundamental Tutorial] Layout  (0) 2021.08.23
[SwiftUI fundamental Tutorial] Image  (0) 2021.08.22
[SwiftUI fundamental Tutorial] Text  (0) 2021.08.21
[SwiftUI fundamental Tutorial] WebView  (0) 2021.08.20
profile

Devlog

@덩이

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

검색 태그

티스토리툴바