17. [SwiftUI] @State

property wrapper

뷰가 변수의 상태 변화를 관찰하도록!

만약 변수에 변화가 생기면 뷰를 업데이트 한다.

https://toughie-ios.tistory.com/108

[SwiftUI] PropertyWrapper, @State, @Binding

아래는 @State변수를 활용한 뷰의 변화를 보여주기 위한 간단한 예시이다.

버튼을 누르거나 스와이프를 하면 배경색, 타이틀, 카운트가 바뀐다.

//  Created by Toughie on 2023/04/20.
//

import SwiftUI

struct StateWrapper: View {
    
    @State var backgroundColor: Color = Color.green.opacity(0.5)
    @State var myTitle: String = "Cozy Green"
    @State var count: Int = 0
    
    var body: some View {
        ZStack {
            backgroundColor
                .ignoresSafeArea(.all)
            
            VStack(spacing: 20) {
                Text(myTitle)
                    .font(.title)
                Text("\(count)")
                    .font(.headline)
                    .underline()
                HStack(spacing: 20) {
                    Button("BlueLover") {
                        backgroundColor = .blue
                            .opacity(0.5)
                        myTitle = "I Love Blue"
                        count += 1
                    }
                    Button("PinkLover") {
                        backgroundColor = .pink
                            .opacity(0.5)
                        myTitle = "I like pink"
                        count -= 1
                    }
                }
            }.foregroundColor(.white)
        }
        .gesture(
            DragGesture()
                .onEnded { value in
                    if value.translation.width > 0 {
                        backgroundColor = .blue
                            .opacity(0.5)
                        count += 1
                        myTitle = "Swiped blue"
                    } else {
                        backgroundColor = .pink
                            .opacity(0.5)
                        count -= 1
                        myTitle = "Swiped pink"
                    }
                }
        )
    }
}

나는 이런 파스텔 톤의 컬러가 좋다 :)