Toggle

Toggle เป็นหนึ่งใน UI Control พื้นฐานที่ใช้สำหรับควบคุมสถานะแบบทวิภาค (Binary State) เช่น เปิด–ปิด (On/Off), อนุญาต–ไม่อนุญาต (Enable/Disable) หรือ ใช้งาน–ไม่ใช้งาน (Active/Inactive)

ในเชิงโครงสร้าง SwiftUI ออกแบบ Toggle ให้ทำงานผ่านกลไก Binding กล่าวคือ ตัวควบคุมจะไม่เก็บค่าด้วยตนเอง แต่ผูกกับตัวแปรสถานะ (@State, @Binding, หรือ Observable Object) เมื่อผู้ใช้เปลี่ยนสถานะ ค่าในตัวแปรจะถูกปรับ และ View ที่อ้างอิงค่านั้นจะถูกเรนเดอร์ใหม่โดยอัตโนมัติ แนวทางนี้ช่วยลดความซับซ้อนของการจัดการเหตุการณ์ (Event Handling) แบบเดิม และส่งเสริมรูปแบบการพัฒนาเชิงประกาศ (Declarative Programming)

โครงสร้างพื้นฐานของ Toggle

รูปแบบพื้นฐานของ Toggle มีองค์ประกอบหลักสองส่วน ได้แก่

• Label – ส่วนแสดงข้อความหรือ View ประกอบ

• Binding Value – ตัวแปรชนิด Boolean ที่ผูกกับสถานะของสวิตช์

struct ContentView: View {
    
    @State private var isWifiEnabled: Bool = false
    
    var body: some View {
        VStack(spacing: 20) {
            Toggle("Wi-Fi", isOn: $isWifiEnabled)
            Text("Wi-Fi is \(isWifiEnabled ? "On" : "Off")")
        }
        .padding()
    }
}

SwiftUI รองรับ View Composition ภายใน Label ทำให้ Label ไม่จำกัดเฉพาะข้อความ นักพัฒนาสามารถประกอบ View ได้อย่างอิสระ เช่น

Toggle(isOn: $isWifiEnabled) {
    HStack {
        Image(systemName: "wifi")
        Text("Wi-Fi")
            .font(.headline)
    }
}

การตกแต่ง Toggle ด้วย Modifier

การกำหนดรูปแบบด้วย .toggleStyle เช่น .toggleStyle(.automatic) .toggleStyle(.switch) หรือ .toggleStyle(.button)

Toggle("Wi-Fi", isOn: $isWifiEnabled)
    .toggleStyle(.switch)

การกำหนดสีด้วย .tint

Toggle("Wi-Fi", isOn: $isWifiEnabled)
    .tint(.green)

การซ่อน Label

Toggle("Wi-Fi", isOn: $isWifiEnabled)
    .labelsHidden()

การควบคุมพฤติกรรมด้วย .disabled

Toggle("Wi-Fi", isOn: $isWifiEnabled)
    .disabled(true)

การตอบสนองต่อการเปลี่ยนค่า

Toggle("Wi-Fi", isOn: $isWifiEnabled)
    .onChange(of: isWifiEnabled) { newValue in
        print("Wi-Fi changed to:", newValue)
    }

ในระดับที่สูงขึ้น สามารถกำหนดรูปแบบเองโดย conform กับ ToggleStyle

struct CheckmarkToggleStyle: ToggleStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.label
            Spacer()
            Image(systemName: configuration.isOn ? "checkmark.circle.fill" : "circle")
                .foregroundColor(configuration.isOn ? .green : .gray)
                .onTapGesture {
                    configuration.isOn.toggle()
                }
        }
    }
}

Toggle("Wi-Fi", isOn: $isWifiEnabled)
    .toggleStyle(CheckmarkToggleStyle())

ตัวอย่างการนำไปใช้งาน

struct SettingsView: View {
    
    @State private var isNotificationEnabled = true
    
    var body: some View {
        Form {
            Toggle(isOn: $isNotificationEnabled) {
                Label("Notifications", systemImage: "bell")
            }
            .tint(.orange)
            
            Text(isNotificationEnabled ? "Notifications Enabled" : "Notifications Disabled")
        }
    }
}