ViewModifier: มันคืออะไร, ตัวแก้ไข View ใน SwiftUI

ViewModifier ใน SwiftUI คืออะไร?

ViewModifier เป็นโปรโตคอล SwiftUI ที่กำหนดข้อตกลงสำหรับการสร้างตัวแก้ไขที่สามารถใช้กับ View ทุกชนิด โดยประกาศเป็น protocol ViewModifier { associatedtype Body: View; func body(content: Content) -> Body } โดยที่ Content คือชนิดของ View ต้นฉบับที่ส่งไปยังตัวแก้ไข

โปรโตคอล ViewModifier ปรากฏตัวใน iOS 13 พร้อมกับ SwiftUI รุ่นแรก และยังคงมีเสถียรภาพไปจนถึง iOS 18+ เป้าหมายหลักคือการให้กลไกแก่นักพัฒนาในการรวมโซ่งตัวแก้ไขที่ซ้ำๆ ไว้ในชนิดที่สามารถใช้ซ้ำได้เดียว หากไม่มี ViewModifier ทุกครั้งที่คุณต้องการใช้ชุดรูปแบบเดียวกัน คุณจะต้องทำซ้ำตัวแก้ไขทั้งหมดด้วยตน

ตาม Swift by Sundell (2023) ViewModifier เป็นวิธีที่ต้องการในการจัดระเบียบรูปแบบในโปรเจค SwiftUI เมื่อชุดตัวแก้ไขเดียวกันถูกใช้ในสามแหล่งหรือมากกว่า สำหรับการใช้งานเดียว โส้องโซ่งตัวแก้ไขในตัวโดยตรงบน View ก็เพียงพอ

ไวยากรณ์ของโปรโตคอล

โปรโตคอล ViewModifier ต้องการการใช้เมธอดหนึ่ง body(content:) และสามารถมีคุณสมบัติเพื่อการกำหนดค่าพฤติกรรมผ่านพารามิเตอร์ตัวเริ่มต้นของตัวแก้ไขแบบกำหนดเอง

โปรโตคอล ViewModifier ทำงานอย่างไร

โปรโตคอล ViewModifier กำหนดเมธอด body(content:) ซึ่งรับ View ต้นฉบับ (ชนิด Content) และส่งคืน View ที่ได้รับการแก้ไข (ชนิด Body) SwiftUI ใช้ตัวแก้ไขกับ View โดยการส่งมันเป็น content และใช้ผลลัพธ์สำหรับการแสดงผล

struct CardStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding(16)
            .background(Color.white)
            .cornerRadius(12)
            .shadow(radius: 4, x: 0, y: 2)
    }
}

// การใช้งาน:
Text("สวัสดี, SwiftUI!")
    .modifier(CardStyle())

เมื่อคุณเรียก .modifier(CardStyle()) SwiftUI จะสร้างอินสแตนของ ModifiedContent<Text, CardStyle> ที่เก็บ View ต้นฉบับและตัวแก้ไข ในระหว่างการเรนเดอร์ SwiftUI เรียก CardStyle.body(content: text) เพื่อรับ View ที่ได้รับการแก้ไขด้วย padding, background, cornerRadius และ shadow

ข้อแตกต่างที่สำคัญ: ViewModifier.body ถูกเรียกทุกครั้งที่ View ถูกอัพเดต ดังนั้นภายใน body ไม่ควรมีการคำนวณหนักหรือผลกระทบข้างคีง หากตัวแก้ไขขึ้นอยู่กับข้อมูลภายนอก (state, environment) ให้ส่งผ่านพารามิเตอร์ตัวเริ่มต้น

ตัวแก้ไขในตัวและแบบกำหนดเอง: ความแตกต่าง

ตัวแก้ไขในตัวของ SwiftUI (font, foregroundColor, frame, padding) เป็นเมธอดขยายของโปรโตคอล View ที่ส่งคืนชนิด ModifiedContent โดยที่มันไม่ได้ใช้ ViewModifier โดยตรง — SwiftUI ใช้การใช้งานที่ได้รับการเพิ่มเติมภายในสำหรับแต่ละตัวแก้ไขในตัว

ตัวแก้ไข ViewModifier แบบกำหนดเอง เหมาะสมเมื่อการใช้ตัวแก้ไขชุดเดียวกันในสองแหล่งหรือมากกว่า สำหรับการใช้งานเดียว การใช้โส้งตัวแก้ไขโดยตรงจะดีกว่า — โค้ดอ่านง่ายและคอมไพเลอร์สามารถเพิ่มเติมได้ดีกว่า

ตาม WWDC 2023 Apple แนะนำให้สร้างตัวแก้ไข ViewModifier แบบกำหนดเองสำหรับรูปแบบที่เกี่ยวข้องกับระบบการออกแบบของแอปพลิเคชั่น: การ์ด, ปุ่ม, ช่องกรอกข้อมูล ซึ่งช่วยให้มีความสม๊ำเสมอและทำให้การบำรุงง่ายขึ้นเมื่อมีการเปลี่ยนแปลงการออกแบบ

รูปแบบการใช้งาน ViewModifier

รูปแบบ 1: การห่อหุ้มระบบการออกแบบ กรณีการใช้งานที่พบบ่อยที่สุดของ ViewModifier คือการสร้างแหล่งการอ้างอิงเดียวสำหรับรูปแบบทางภาพในแอปพลิเคชัน แต่ละองค์ประกอบของระบบการออกแบบ (การ์ด, ปุ่ม, หัวข้อ) จะได้รับตัวแก้ไขของตนเอง

struct PrimaryButton: ViewModifier {
    var isEnabled: Bool

    func body(content: Content) -> some View {
        content
            .font(.headline.weight(.semibold))
            .foregroundColor(.white)
            .padding(EdgeInsets(top: 12, leading: 24, bottom: 12, trailing: 24))
            .background(isEnabled ? Color.blue : Color.gray)
            .cornerRadius(8)
            .opacity(isEnabled ? 1.0 : 0.6)
    }
}

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

รูปแบบ 3: การรวมตัวแก้ไข ViewModifier สามารถใช้ ViewModifier อื่น ภายใน body ของมัน ซึ่งช่วยให้สามารถสร้างลำดับขั้นของตัวแก้ไข โดยแต่ละตัวรับผิดชอดในแต่ละด้านของการนำเสนอทางภาพ ตัวอย่างเช่น CardStyle สามารถใช้ ShadowStyle และ BorderStyle ภายในได้

ตาม Point-Free (2024) การรวมตัวแก้ไขผ่าน ViewModifier ดีกว่าการสืบทอด: แต่ละตัวแก้ไขรับผิดชอบหนึ่งงาน และสามารถรวมกันได้อย่างอิสระ ซึ่งเป็นไปตามหลักการมอบหมายความรับผิดชอบเดี่ยวใน SwiftUI

ประสิทธิภาพและการรวมตัวแก้ไข

ประสิทธิภาพ ของ ViewModifier ขึ้นอยู่กับจำนวนตัวห่อ ModifiedContent ที่ถูกสร้างขึ้นในแต่ละการใช้งาน SwiftUI เพิ่มเติมโส้งตัวแก้ไขผ่านการเปรียบเทียบในขั้นตอนการเรนเดอร์ แต่จำนวนตัวแก้ไขที่มากเกินไปอาจทำให้การอัพเดตช้าลง

การเพิ่มเติม: รวมตัวแก้ไขแบบเรียงต่อกันหลายตัวของชนิดเดียวกัน (เช่น padding หลายตัว) ไว้เป็นตัวเดียว ใช้ PreferenceKey เมื่อจำเป็นจริงเท่านั้น — ตัวแก้ไขที่อ่านค่ากำหนดค่าจะทริเกอร์การเรนเดอร์เพิ่มเติม

กฎทั่วไป: หาก View มีตัวแก้ไขมากกว่า 10 ตัว — นำบางส่วนออกไปยังตัวแก้ไข ViewModifier แบบกำหนดเอง ซึ่งจะช่วยให้อ่านง่ายขึ้นและทำให้ SwiftUI สามารถเพิ่มเติมการอัพเดตได้ ตาม SwiftUI Lab (2024) การรวมกลุ่มตัวแก้ไขใน ViewModifier ช่วยลดเวลาการเรนเดอร์ลง 15–30% สำหรับ Views ที่ซับซ้อน