[SwiftUI fundamental Tutorial] Basic guide

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

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

 

 

 

HStack (Horizontal Stack)

import SwiftUI

struct ContentView: View{
	var body: some View{
    	HStack{
        	Text("1")
            	.fontWeight(.bold)
                .font(.system(size: 60))
                
            Text("2")
            	.fontWeight(.bold)
                .font(.system(size: 60))
                
            Text("3")
            	.fontWeight(.bold)
                .font(.system(size: 60))
        }//HStack에 대한 속성
        .background(Color.red)
    }
}

 

 

 

VStack (Vertical Stack)

import SwiftUI

struct ContentView: View{
	var body: some View{
    	VStack{
        	Text("1")
            	.fontWeight(.bold)
                .font(.system(size: 60))
                
            Text("2")
            	.fontWeight(.bold)
                .font(.system(size: 60))
                
            Text("3")
            	.fontWeight(.bold)
                .font(.system(size: 60))
        }//VStack에 대한 속성
        .background(Color.red)
    }
}

 

 

각각의 stack에 대한 속성 부여 가능

• ex) font, background color 등

 

 

 

stack 안에 또 다른 stack 넣을 수 있음

import SwiftUI

struct ContentView: View{
	var body: some View{
    	HStack{
        
        	VStack{
        		Text("1")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
                
            	Text("2")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
                
            	Text("3")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
        	}.background(Color.red)
            
            VStack{
        		Text("1")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
                
            	Text("2")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
                
            	Text("3")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
        	}.background(Color.red)
            
            VStack{
        		Text("1")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
                
            	Text("2")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
                
            	Text("3")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
        	}.background(Color.red)
        }        
        .background(Color.yellow)
        .padding(10) //padding을 전체적으로
    }
}

그냥 padding(값)은 전체적으로 padding을 주는 것

위치별로 padding 값 지정 가능: top, bottom, leading(왼쪽), trailing(오른쪽)

• ex) .padding(.trailing, 30)

하다가 알게되었는데 padding을 먼저 주고 background color를 지정하면 노란색 테두리가 전체적으로 감싸줌

SwiftUI도 순서가 중요한가 봄

 

 

 

중복되는 VStack 코드를 효율적으로 관리하기 위해 struct를 따로 만들어서 적용

struct 선언시에도 View를 상속 받아야 함

import SwiftUI

struct ContentView: View{

	var body: some View{
    	
        HStack{
        
        	MyStackView(),
            MyStackView(),
            MyStackView()
        	
        }        
        .background(Color.yellow)
        .padding(10) //padding을 전체적으로
    }
}

struct MyStackView: View{

	var body: some View{
    	
        VStack{
        		Text("1")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
                
            	Text("2")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
                
            	Text("3")
            		.fontWeight(.bold)
                	.font(.system(size: 60))
        	}.background(Color.red)
    }
}

 

 

 

따로 선언한 struct 뷰 자체를 따로 파일로 만들어서 해도 됨

• ex) MyStackView.swift파일을 따로 만들었을 경우의 ContentView

import SwiftUI

struct ContentView: View{

	var body: some View{
    	
        HStack{
        
        	MyStackView(),
            MyStackView(),
            MyStackView()
        	
        }        
        .background(Color.yellow)
        .padding(10) //padding을 전체적으로
    }
}

ContentView에는 MyStackView 내용이 없어도 해당 파일(MyStackView.swift)을 알아서 찾아서 보여줌