[SwiftUI] How to use "Toggle" in a view

• 1. 기본 사용 방법
• 2. 라벨 추가
• 3. 변수 추가
• 4. Event Handle
• 5. 체크박스 만들기

---

1. 기본 사용 방법

Toggle(isOn:.constant(true)){
    // do action
}

기본 토글 결과

 fullwidth로 우측에 스위치가 생성됩니다. iOS에서는 checkbox보다 toggle이라는 개념을 더 많이 활용하는 것 같습니다. (기존 checkboxstyle은 deprecated 되었다는데, 제가 못 찾은 걸 수도 있고요.)

---

2. 라벨 추가

Toggle(isOn:.constant(true)){
    Text("라벨입니다. #1")
}
        
Toggle(isOn:.constant(true), label: {
    Text("라벨입니다. #2")
})

라벨이 추가된 결과

1번과 2번 방식으로 View를 추가하여 Label을 추가할 수 있습니다.

---

3. 변수 추가

import SwiftUI

// View 페이지
struct TestView: View {
    @State var checked = false
    
    var body: some View {
        Toggle(isOn:$checked){
            Text("checked값을 통하여 on/off를 지정 가능합니다.")
        }
    }
}

// View 미리보기
struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

미리보기 결과

 checked라는 변수를 선언하여 Toggle의 isOn에 대입해 주니다. 여기서 주의할 점은 ".constant"가 아닌 $를 이용하여 적용해 주었다는 점입니다. .constant는 변화를 감지하여 적용되지 않고 $checked라고 해주어야 @State로서의 작동을 하게 됩니다.

---

4. Event Handle

import SwiftUI

// View 페이지
struct TestView: View {
    @State var checked = false
    
    var body: some View {
        Toggle(isOn:$checked){
            Text("checked값을 통하여 on/off를 지정 가능합니다.")
        }
        .onChange(of: checked) { value in
            print(value)
        }
    }
}

// View 미리보기
struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

Toggle의 onChange를 이용하여, Toggle의 상태 값 변경을 감지하고 처리할 수 있습니다.

위와 같이 작성해 두면, checked값이 변경될 때마다 Console창에 변경된 checked값을 출력해 줍니다.

Console에 출력된 Toggle 결과

---

5. 체크박스 만들기

import SwiftUI

// 체크박스 스타일
struct CustomCheckBox: ToggleStyle {
    func makeBody(configuration: Configuration) -> some View {
        // 버튼으로 적용
        Button(action: {
            // isOn값 Toggle
            configuration.isOn.toggle()

        }, label: {
            HStack {
                // CheckBox가 먼저오 도록 배치
                Image(systemName: configuration.isOn ? "checkmark.square" : "square")
                
                // 라벨이 뒤로 오도록 배치
                configuration.label
            }
        })
        // Button에 지정된 스타일 제거
        .buttonStyle(PlainButtonStyle())
    }
}

// View 페이지
struct TestView: View {
    @State var checked = false
    
    var body: some View {
        Toggle(isOn:$checked){
            Text("checked값을 통하여 on/off를 지정 가능합니다.")
        }
        .onChange(of: checked) { value in
            print(value)
        }
        .toggleStyle(CustomCheckBox())
    }
}

// View 미리보기
struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

위 와 같이 CustomCheckBox를 생성해 주고 이를 Toggle의 toggleStyle에 적용해 주면, 아래와 같이 Checkbox 결과가 보이게 됩니다.

체크박스 결과