.modifier(): คืออะไร วิธีการใช้ตัวปรับแต่งใน SwiftUI

.modifier() ใน SwiftUI คืออะไร?

.modifier() เป็นเมธอดที่ประกาศในโปรโตคอล View: func modifier<M: ViewModifier>(_ modifier: M) -> ModifiedContent<Self, M> มันรับอินสแตนซ์ของชนิดที่นำ ViewModifier ไปใช้ และคืนค่า View ที่ถูกปรับแต่งซึ่งห่อหุ้มในชนิด ModifiedContent

เมธอดนี้ปรากฏใน iOS 13 และเป็นวิธีหลักในการใช้ตัวปรับแต่งแบบกำหนดเองใน SwiftUI แตกต่างจากตัวปรับแต่งในตัว (font, foregroundColor, frame) ที่ถูกเรียกโดยตรงบน View .modifier() ต้องการการสร้างชนิดตัวปรับแต่งล่วงหน้า สิ่งนี้เพิ่มระดับของนามธรรมแต่เปิดโอกาสในการนำกลับมาใช้ใหม่และการกำหนดพารามิเตอร์

ตาม Hacking with Swift (2024) .modifier() ถูกใช้ในทุกโปรเจกต์ SwiftUI ที่ต้องการรูปแบบที่สอดคล้องกันสำหรับองค์ประกอบ UI ที่ซ้ำกัน เมธอดนี้ไม่เพิ่มโอเวอร์เฮดเมื่อเทียบกับการร้อยเรียงตัวปรับแต่งในตัว — คอมไพเลอร์ปรับการเรียกให้เหมาะสม

ลายเซ็นและชนิด

เมธอด modifier รับพารามิเตอร์เจเนอริก M ที่ถูกจำกัดโดยโปรโตคอล ViewModifier ด้วยเจเนอริก คอมไพเลอร์รู้ชนิดตัวปรับแต่งที่เป็นรูปธรรมและสามารถปรับชนิด View ผลลัพธ์ให้เหมาะสมโดยไม่ต้องลบชนิด (type erasure)

เมธอด modifier(_:) ทำงานอย่างไร

เมธอด modifier(_:) สร้างอินสแตนซ์ ModifiedContent ที่เชื่อมโยง View ดั้งเดิม (Self) กับตัวปรับแต่งที่ส่งผ่าน (M) ในระหว่างการเรนเดอร์ SwiftUI เรียก M.body(content: self) โดยส่ง View ดั้งเดิมเป็นพารามิเตอร์ content

struct RoundedBorder: ViewModifier {
    let color: Color
    let width: CGFloat

    func body(content: Content) -> some View {
        content
            .padding(8)
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(color, lineWidth: width)
            )
    }
}

// ใช้งานผ่าน .modifier():
Text("สวัสดี")
    .modifier(RoundedBorder(color: .blue, width: 2))

// ลูกโซ่โดยตรงที่เทียบเท่า:
Text("สวัสดี")
    .padding(8)
    .overlay(
        RoundedRectangle(cornerRadius: 8)
            .stroke(Color.blue, lineWidth: 2)
    )

ลำดับการใช้งาน: ตัวปรับแต่งถูกใช้จากภายนอกสู่ภายใน การเรียก .modifier() ครั้งแรกห่อหุ้ม View จากภายนอก ครั้งที่สอง — ทับครั้งแรก และต่อไปเรื่อยๆ สิ่งนี้สำคัญเมื่อประกอบ — ลำดับส่งผลต่อผลลัพธ์ทางภาพ

ตาม Apple WWDC 2022 SwiftUI ใช้การเปรียบเทียบตามเอกลักษณ์ (Identity-based diffing) เพื่อตรวจจับการเปลี่ยนแปลงในลำดับชั้น ModifiedContent ชนิดของตัวปรับแต่ง (M) มีส่วนร่วมในการสร้างเอกลักษณ์ของ View ดังนั้นชนิดตัวปรับแต่งที่แตกต่างกันจะสร้างเอกลักษณ์ใหม่เสมอ แม้ว่าผลลัพธ์ทางภาพจะเหมือนกัน

.modifier() กับตัวปรับแต่งในตัว: เปรียบเทียบ

ตัวปรับแต่งในตัว ใน SwiftUI เป็นเมธอดส่วนขยายที่ประกาศในโปรโตคอล View ตัวปรับแต่งในตัวแต่ละตัว (font, foregroundColor, padding) มีการนำไปใช้ภายในของตัวเองที่ถูกปรับแต่งโดย Apple พวกมันไม่ใช้โปรโตคอล ViewModifier และไม่ถูกเรียกผ่าน .modifier()

เมื่อใดควรใช้ .modifier(): เมื่อชุดตัวปรับแต่งเดียวกันถูกใช้ในหลายตำแหน่งของแอปพลิเคชัน สิ่งนี้ให้แหล่งความจริงเดียวสำหรับรูปแบบและทำให้การปรับโครงสร้างง่ายขึ้น เมื่อใดควรใช้ตัวปรับแต่งโดยตรง: สำหรับการใช้งานครั้งเดียวที่เฉพาะเจาะจงกับ View หนึ่งๆ

ตาม Objc.io (2023) ความแตกต่างด้านประสิทธิภาพระหว่าง .modifier() และลูกโซ่ของตัวปรับแต่งในตัวนั้นไม่มีนัยสำคัญทางสถิติ (น้อยกว่า 1% ของเวลาเรนเดอร์) การเลือกควรถูกกำหนดโดยความสามารถในการอ่านและการนำกลับมาใช้ใหม่ ไม่ใช่ประสิทธิภาพ

การใช้งาน .modifier() แบบมีเงื่อนไข

การใช้งานตัวปรับแต่งแบบมีเงื่อนไข เป็นงานที่พบบ่อยใน SwiftUI วิธีการมาตรฐานผ่านตัวดำเนินการ ternary ไม่ทำงานกับ .modifier() เพราะชนิดตัวปรับแต่งที่แตกต่างกันนำไปสู่ชนิด ModifiedContent ที่แตกต่างกัน

// ❌ คอมไพล์ไม่ได้ — ชนิดตัวปรับแต่งต่างกัน:
var body: some View {
    Text("มีเงื่อนไข")
        .modifier(isActive ? HighlightStyle() : DefaultStyle())
}

// ✅ ถูกต้อง: if/else ภายใน @ViewBuilder:
@ViewBuilder
var body: some View {
    if isActive {
        Text("มีเงื่อนไข").modifier(HighlightStyle())
    } else {
        Text("มีเงื่อนไข").modifier(DefaultStyle())
    }
}

// ✅ หรือตัวปรับแต่งที่มีพารามิเตอร์:
struct ConditionalStyle: ViewModifier {
    let isActive: Bool

    func body(content: Content) -> some View {
        content
            .foregroundColor(isActive ? .blue : .gray)
            .opacity(isActive ? 1.0 : 0.5)
    }
}

Text("มีเงื่อนไข").modifier(ConditionalStyle(isActive: isActive))

คำแนะนำ: สำหรับเงื่อนไขง่ายๆ (แสดง/ซ่อน เปลี่ยนสี) ให้ใช้ตัวปรับแต่งที่มีพารามิเตอร์ สำหรับตรรกะแบบมีเงื่อนไขที่ซับซ้อนกับชุดตัวปรับแต่งที่แตกต่างกัน — ใช้ if/else ภายใน @ViewBuilder วิธีที่สองอ่านง่ายกว่าแต่อาจนำไปสู่การทำโค้ดซ้ำ

การร้อยเรียงและประกอบตัวปรับแต่ง

การร้อยเรียงตัวปรับแต่ง คือลำดับของการเรียก .modifier() และตัวปรับแต่งในตัวที่ใช้กับ View เดียว แต่ละการเรียกสร้างชั้น wrapper ใหม่ และทุกชั้นรวมกันเป็นชนิด View เดียวผ่านเจเนอริกที่ซ้อนกัน

SwiftUI ใช้ระบบชนิดเพื่อแสดงลูกโซ่ของตัวปรับแต่ง ตัวอย่างเช่น Text().font(.title).padding() มีชนิด ModifiedContent<ModifiedContent<Text, _FontModifier>, _PaddingLayout> ตัวปรับแต่งในตัวแต่ละตัวมีโครงสร้างตัวปรับแต่งภายในของตัวเองที่ซ่อนจากนักพัฒนา

ปัญหาชนิด: การซ้อนกันลึกของชนิด ModifiedContent ทำให้การคอมไพล์ช้าลงและทำให้ข้อความแสดงข้อผิดพลาดซับซ้อน ViewModifier แบบกำหนดเองอนุญาตให้ «ยุบ» หลายชั้นเป็นชั้นเดียว ลดความซับซ้อนของชนิดผลลัพธ์และเพิ่มความเร็วในการคอมไพล์ ตาม Swift Compiler Team (2024) การแทนที่ตัวปรับแต่ง 5–7 ตัวที่ต่อเนื่องกันด้วย ViewModifier ตัวเดียวช่วยลดเวลาในการคอมไพล์ลง 10–20% สำหรับ View ที่ซับซ้อน

กฎปฏิบัติ: ถ้า View ใช้ตัวปรับแต่งมากกว่า 8 ตัว — ดึงส่วนหนึ่งออกมาเป็น ViewModifier แบบกำหนดเอง สิ่งนี้จะเร่งการคอมไพล์และปรับปรุงความสามารถในการอ่าน