ButtonStyle ใน SwiftUI

SwiftUI มอบวิธีอันทรงพลังในการสร้างและปรับแต่งมุมมองโดยใช้โปรโตคอลการกำหนดรูปแบบ โปรโตคอลเหล่านี้ช่วยให้เราสามารถกำหนดรูปลักษณ์ของมุมมองของเราในโค้ดบรรทัดเดียว

ส่งผลให้มุมมองมีความสอดคล้องกัน ทำให้แอปใช้งานง่ายขึ้นและน่าสนใจยิ่งขึ้น

ปุ่มจัดแต่งทรงผมที่ไม่มี ButtonStyle

เราสามารถจัดรูปแบบปุ่มของเราแบบอินไลน์ได้โดยใช้ตัวดัดแปลงที่แตกต่างกัน พิจารณาตัวอย่างนี้:

Button("Tap me") {}
    .font(.system(.callout, weight: .bold))
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, maxHeight: 48)
    .background(.blue)
    .cornerRadius(8)

วิธีการนี้ใช้ได้อย่างสมบูรณ์หากคุณออกแบบปุ่มเดียว แต่ถ้าคุณต้องการพัฒนาปุ่มหลายปุ่มด้วยรูปแบบเดียวกัน คุณต้องใช้ButtonStyleโปรโตคอล มันจะช่วยแชร์และใช้สไตล์เดียวกันกับปุ่มต่างๆ ในแอพ

ปุ่มจัดแต่งทรงผมด้วย ButtonStyle

มาสร้างสไตล์ปุ่มแบบกำหนดเองของเราที่PrimaryButtonStyleชื่อว่า นี่คือลักษณะที่ใช้สำหรับปุ่มหลักตลอดทั้งแอปพลิเคชัน

ลองดูตัวอย่างนี้:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(.blue)
            .cornerRadius(8)
    }
}

หากต้องการใช้สไตล์ปุ่มที่สร้างขึ้นให้ลองเขียนสิ่งนี้:

Button("Tap me") {}
    .buttonStyle(PrimaryButtonStyle())

การกำหนดค่ารูปแบบปุ่ม

ออบเจกต์การกำหนดค่าของปุ่มมีคุณสมบัติหลายอย่าง รวมถึงisPressedค่าบูลีน ซึ่งบ่งชี้ว่าปุ่มนั้นกำลังถูกกดอยู่หรือไม่ เราสามารถใช้สิ่งนั้นเพื่อเปลี่ยนรูปแบบปุ่มเมื่อผู้ใช้แตะปุ่ม ในการทำเช่นนั้น เราสามารถเขียนสิ่งนี้:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
            .cornerRadius(8)
    }
}

เคล็ดลับมือโปร

โค้ดของเราสามารถทำให้สะอาดขึ้นและอ่านง่ายขึ้นโดยเพิ่มส่วนขยายต่อไปนี้ในPrimaryButtonStyle:

extension ButtonStyle where Self == PrimaryButtonStyle {
    
    static var primary: PrimaryButtonStyle {
        PrimaryButtonStyle()
    }
}

Button("Tap me") {}
    .buttonStyle(.primary)

ด้วยButtonStyleเราสามารถกำหนดลักษณะที่ปรากฏ เลย์เอาต์ และการโต้ตอบของปุ่ม และรับประกันความสอดคล้องกันทั่วทั้งแอปพลิเคชัน

นอกจากนี้ยังมีวิธีสรุปตรรกะและสไตล์ที่เกี่ยวข้องกับปุ่มลงในส่วนประกอบที่นำมาใช้ซ้ำได้ สิ่งนี้ทำให้ codebase สามารถบำรุงรักษาและปรับขนาดได้มากขึ้น

ขอบคุณที่อ่าน!

หากคุณพบว่าบทความนี้มีประโยชน์ อย่าลืมปรบมือให้เพื่อให้คนอื่นค้นพบได้ง่ายขึ้น