ToggleSwitch

[Roy-wonji]

ToggleSwitch 란

SwiftUI의 Toggle()을 사용하면 UIKit의 UISwitch 에서처럼 사용자가 true이거나 false상태 사이를 이동할 수 있습니다.

Toggle()의 현재 값을 저장하는 데 사용할 @State Boolean 속성을 정의해야 합니다. 그런 다음 이것을 사용하여 필요에 따라 다른 view를 표시하거나 숨길 수 있습니다.

버튼이 Toggle() 될 때마다if 문을 사용하여 텍스트를 지정해 줄 수 있습니다.

@State private var someBinding = true

Toggle("SomeText", isOn: $someBinding)

struct ContentView: View {
    
    @State private var someToggle = true
    
    var body: some View {
        VStack {
            Toggle("확인", isOn: $someToggle)
            
            if someToggle {
                Text("확인 되었습니다.")
            } else {
                Text("확인 버튼을 눌러주세요.")
            }
        }
        .padding()
    }
}

위 코드와 동일한 화면을 보여주는 [삼항연산자](https://seons-dev.tistory.com/36) 를 사용할 수 도 있겠죠?

struct ContentView: View {
    
    @State private var someToggle = true
    
    var body: some View {
        VStack {
            Toggle("확인", isOn: $someToggle)
            
            someToggle ? Text("확인 되었습니다.") : Text("확인 버튼을 눌러주세요.")
        }
        .padding()
    }
}

Toggle에 색상 부여

toggleStyle()수정자를 사용하여 Toggle Switch를 만드는 데 사용되는 색상을 사용자 지정할 수 있습니다.

이것은 Toggle view가 accentColor()와 함께 작동하지 않기 때문에, 색상을 다시 지정하는 유일한 방법입니다

.toggleStyle(SwitchToggleStyle(tint: Color.yellow))

struct ContentView: View {
    
    @State private var someToggle = true
    
    var body: some View {
        VStack {
            Toggle("확인", isOn: $someToggle)
                .toggleStyle(SwitchToggleStyle(tint: Color.yellow))
            
            someToggle ? Text("확인 되었습니다.") : Text("확인 버튼을 눌러주세요.")
                
        }
        .padding()

삼항연산자를 사용해서 토글이 활성화 되어있을때와 그렇지 않을때에 따라 텍스트를 다르게 해줄수도 있어여!

import SwiftUI

struct SwiftUIView: View {
    @State var toggleIsOn: Bool = false
    var body: some View {
        VStack {
            HStack {
                Text("@Seogun :")
                Text(toggleIsOn ? "온라인 중" : "오프라인")
                    .foregroundColor(toggleIsOn ? Color.blue : Color.red)
            }
            .font(.title)
            
            Toggle(isOn: $toggleIsOn, label: {
                Text("로그인")
            })
                .toggleStyle(SwitchToggleStyle(tint: Color(hex:0xff8882)))
            .padding(.horizontal, 100)
             Spacer()
        }
    }
}