Button

ปุ่มคำสั่ง (Button) เป็นหนึ่งใน UI Control ที่มีบทบาทพื้นฐานที่สุดในการพัฒนาแอปพลิเคชัน เพราะทำหน้าที่เป็น “ตัวกระตุ้นเหตุการณ์” (Event Trigger) ที่เชื่อมต่อการโต้ตอบของผู้ใช้เข้ากับตรรกะของระบบ

โครงสร้างพื้นฐานของ Button ใน SwiftUI

SwiftUI ออกแบบ Button ให้มีองค์ประกอบหลักสองส่วน คือ

• Action: คำสั่งที่ต้องการให้เกิดขึ้นเมื่อผู้ใช้กดปุ่ม

• Label: ส่วนแสดงผลของปุ่ม (ข้อความ ไอคอน หรือ View อื่น ๆ)

struct ContentView: View {
    
    @State private var count = 0
    
    var body: some View {
        VStack(spacing: 20) {
            Button("Increase") {
                count += 1
            }
            Text("Count: \(count)")
        }
        .padding()
    }
}

ในการใช้งานจริง มักใช้รูปแบบที่แยกส่วน Action และ Label อย่างชัดเจน ซึ่งช่วยให้นักพัฒนาสามารถออกแบบ View ของ Label ซึ่งมีโครงสร้างที่ซับซ้อนได้

Button {
    count += 1
} label: {
    HStack {
        Image(systemName: "plus.circle.fill")
        Text("Increase")
            .fontWeight(.semibold)
    }
}

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

การกำหนดรูปแบบปุ่มด้วย .buttonStyle

Button("Save") {
    print("Saved")
}
.buttonStyle(.bordered)

โดยรูปแบบที่ใช้บ่อย ได้แก่

.buttonStyle(.automatic)
.buttonStyle(.plain)
.buttonStyle(.bordered)
.buttonStyle(.borderedProminent)

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

Button("Delete") {
    print("Deleted")
}
.buttonStyle(.borderedProminent)
.tint(.red)

การควบคุมขนาดด้วย .controlSize

Button("Continue") {
    print("Next")
}
.buttonStyle(.borderedProminent)
.controlSize(.large)

โดยมีตัวเลือกต่างๆ เช่น

.controlSize(.mini)
.controlSize(.small)
.controlSize(.regular)
.controlSize(.large)

การปิดการใช้งานปุ่มด้วย .disabled

Button("Submit") {
    print("Submitted")
}
.disabled(username.isEmpty)

การตกแต่ง Layout และ Appearance

เนื่องจาก Button เป็น View ปกติ จึงสามารถใช้ Layout Modifier ได้

Button("Login") {
    print("Login")
}
.padding()
.frame(maxWidth: .infinity)
.background(Color.blue.opacity(0.2))
.cornerRadius(12)

ในระดับที่สูงขึ้น สามารถสร้าง Style เองได้

struct RoundedButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .padding()
            .background(configuration.isPressed ? Color.gray : Color.blue)
            .foregroundColor(.white)
            .cornerRadius(10)
            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
    }
}

Button("Custom Button") {
    print("Tapped")
}
.buttonStyle(RoundedButtonStyle())

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

struct ActionButtonView: View {
    
    @State private var isProcessing = false
    
    var body: some View {
        Button {
            isProcessing.toggle()
        } label: {
            HStack {
                Image(systemName: "bolt.fill")
                Text(isProcessing ? "Processing..." : "Start")
            }
            .font(.headline)
        }
        .buttonStyle(.borderedProminent)
        .tint(isProcessing ? .orange : .blue)
        .controlSize(.large)
        .disabled(isProcessing)
        .padding()
    }
}