[SwiftUI fundamental Tutorial] State

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

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

 

 

 

import SwiftUI

struct ContentView: View{

	var body: some View{
    	
        HStack{
        
        	MyStackView(),
            MyStackView(),
            MyStackView()
        	
        }        
        .background(Color.yellow)
        .padding(10)
        .onTapGesture{
        	print("HStack이 클릭됨")
        }
    }
}

.onTapGesture: 텝 제스쳐 추가하기

(resume으로는 확인이 불가능하며 run을 해서 시뮬레이터를 실행시켜야 함)

 

View에다가 클릭 처리하기 위해서 onTapGesture를 사용한 것이며 Button인 경우 action으로 클릭 처리 가능

 

 

import SwiftUI

struct ContentView: View{

    private var isActivated: Bool = false
	
    var body: some View{
    
    	HStack{
        
            MyStackView()
            MyStackView()
            MyStackView()
            
        }
        .padding(10)
        
        
        .background(isActivated ? Color.yellow : Color.black)
        
        .onTapGesture{
        	print("HStack 클릭됨")
        }
    }
    
    
}

조건문을 위한 (값이 바뀔 수 있으므로 var 타입의) 변수 생성: isActivated

 

조건문 

isActivated가 true면 .background(Color.yellow)를 false면 .background(Color.black)

 

 

 

 

import SwiftUI

struct ContentView: View{

    @State
    private var isActivated: Bool = false
	
    var body: some View{
    
    	HStack{
        
            MyStackView()
            MyStackView()
            MyStackView()
            
        }
        .padding(10)
        
        
        .background(isActivated ? Color.yellow : Color.black)
        
        .onTapGesture{
        	print("HStack 클릭됨")
            
            self.isActivated.toggle()
        }
    }
    
    
}

 

 

@State: (SwiftUI에서는 변수를 사용하기 위해서 anotation을 사용해야 함) 값의 변화를 감지하여 뷰에 적용

self: 컨텐트 내부의 내용을 변경하기 위함

toggle(): 알아서 변수(isActivated)가 true면 false로, false면 true로 변경

 

 

 

위의 코드에다가 padding 조건문 추가

import SwiftUI

struct ContentView: View{

    @State
    private var isActivated: Bool = false
	
    var body: some View{
    
    	HStack{
        
            MyStackView()
            MyStackView()
            MyStackView()
            
        }
        .padding (isActivated ? 50 : 10)
        
        .background(isActivated ? Color.yellow : Color.black)
        
        .onTapGesture{
        	print("HStack 클릭됨")
            
            self.isActivated.toggle()
        }
    }
    
    
}

 

 

 

 

애니메이션 기능 추가

import SwiftUI

struct ContentView: View{

    @State
    private var isActivated: Bool = false
	
    var body: some View{
    
    	HStack{
        
            MyStackView()
            MyStackView()
            MyStackView()
            
        }
        .padding (isActivated ? 50 : 10)
        
        .background(isActivated ? Color.yellow : Color.black)
        
        .onTapGesture{
        	print("HStack 클릭됨")
            
            //애니메이션 추가
            withAnimation{
            	self.isActivated.toggle()
            }
        }
    }
    
    
}

 

 

 

 

import SwiftUI

struct ContentView: View {
    
    @State
    private var isActivated: Bool = false
    
    var body: some View {
        
        NavigationView{
            
            VStack{
                HStack{
   
                    //MyStackView(isActivated: $isActivated): 컨텐트 뷰에서 데이터를 넘겨서 MyStackView안에다가 엑티비티를 넘겨줌
                    MyStackView(isActivated: $isActivated)
                    MyStackView(isActivated: $isActivated)
                    MyStackView(isActivated: $isActivated)
                                   
                                    }
                            
                                    .padding(isActivated ? 50.0 : 10.0)
                            
                                    .background(isActivated ? Color.yellow : Color.black)
                                 
                                    .onTapGesture {
                                        print("HStack 클릭됨")
                                      
                                        withAnimation{
                                            self.isActivated.toggle()
                                        }
                                    }//HStack
                
                            //네비게이션 버튼(=링크) 만드는 곳
                NavigationLink(destination: MyTextView(isActivated: $isActivated)){
                                Text("네비게이션")
                                    .font(.system(size: 40))
                                    .fontWeight(.bold)
                                    .padding()
                                    .background(Color.yellow)
                                    .foregroundColor(Color.white)
                                    
                                    .cornerRadius(30)
                            } .padding(.top, 50)
            }
           
            }//NavigationView
        }
}

 

네비게이션 버튼(링크)

네이비게이션 뷰로 하나를 감싼다고 생각

 

destination: 다음에 보여질 화면(뷰)

.cornerRadius(값): 모서리를 둥글게 만들어 줌 

 

 

 

import SwiftUI

struct MyTextView: View{
   
    @State
    private var index: Int = 0
    
    //배열 생성: 배경색 넣어줌
    private let backgroundColors = [
    
        Color.red,
        Color.yellow,
        Color.green,
        Color.blue,
        Color.purple
    
    ]
    
    var body: some View{
        
        VStack{
            
            Spacer()
            
            Text("배경 아이템 인덱스 \(self.index)")
                .font(.system(size: 30))
                .fontWeight(.bold)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 100)
            
            Spacer()
            
        }.background(backgroundColors[index])
        .edgesIgnoringSafeArea(.all)
        
        .onTapGesture {
            print("배경 아이템 클릭됨")
            
            //배열의 크기가 끝까지 왔을 때의 조건문
            if(self.index == self.backgroundColors.count - 1){
                self.index = 0
            }
            else{
                self.index += 1
            }
        }
    }
}

 

 

 

Spacer(): 내부를 늘려줌

 

.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 100): frame을 하지 않으면 정중앙에만 색이 들어옴

.edgeIgnoringSafeArea(.all/.bottom/.top): 상하단바도 채움/아래까지만 채움/상단까지만 채움