SwiftUI 알아보기 :) Button

해당 글에서 코드 부분은 파란색으로 표기 됩니다.

해당 글에서 중요 부분은 붉은색으로 표기 됩니다.

​

​

1. 기본 버튼을 만들기는 View를 상속 받은 ContentView 안 body 영역에 붉은색으로 표시된 코드를 작성한다.

(SwiftUI의 body 영역은 기본적으로 센터에 표시가 되도록 구성되어 있다.)

[ContentView.swift]

import SwiftUI

 

struct ContentView: View {

    var body: some View {

        Button(action: {

            // 버튼 액션

        }) {

            // 디스플레이

            Text("Button")

        }

    }

}

​

 

​2. 기본 버튼에 토글 액션 추가를 하기 위해 변수를 이용하여 구성한다.

여기서 토글 상태를 저장하는 변수로 @State 변수를 사용한다. 

@State 변수란?

- 일반적으로 struct는 값 타입이여서 struct내의 값을 변경할 수 없다.
- SwiftUI는 @State를 제공해 struct내의 값을 변경할 수 있게 해준다.
- SwiftUI의 view는 struct이고, 이는 언제든 소멸되거나 재생성된다.
- 그렇기 때문에 @State를 사용해 지속적으로 변형 가능한 변수를 만드는 것이다.
- 단, @State는 String, Int, Bool과 같은 간단한 타입에만 사용되는 것이 좋다.
- 일반적으로 @State 변수는 private으로 선언되고, 다른 view와 공유되지 않는다.
- 다른 view와 값을 공유하고 싶다면, @ObservedObject나 @EnvironmentObject를 사용하면 된다.

 

[ContentView.swift]

import SwiftUI

 

struct ContentView: View {

    // - 버튼 클릭시 상태값을 저장할 @State 변수

    @State var clickCheck = false

    

    var body: some View {

        Button(action: {

            // 버튼 액션

            // - 버튼 클릭 시 clickCheck 변수의 상태를 토글시킨다.

            self.clickCheck.toggle()

        }) {

            // 디스플레이

            Text("clickCheck?")

        }

        // clickCheck 상태 값에 따라 버튼 밑에 Text 노출 여부를 결정한다.

        if self.clickCheck {

            Text("is Button Clicked")

        }

    }

}

 

 

​3. 토글 버튼을 만들고자 할 경우 Toggle을 이용한다. 

[ContentView.swift]

import SwiftUI

 

struct ContentView: View {

    // - 버튼 클릭시 상태값을 저장할 @State 변수

    @State var clickCheck = false

    

    

    var body: some View {

        // Toggle 을 이용하여 토글 버튼을 생성할 수 있다. 

        // - clickCheck 변수 앞에 $의 경우 바인딩을 해주는 역활을 수행한다.

        // - clickCheck을 바로 넣게 되면 변수가 아니라 값 자체를 나타내게 되므로 변수에 대한 바인딩을 걸어서 전달을 해야 하는것

        Toggle(isOn: $clickCheck) {

            Text("test")

        }.padding()

        

        if clickCheck {

            Text("Togle ON")

        }

    }

}