SwiftUI: ViewModifiers คืออะไร

SwiftUI กลายเป็นตัวเลือกยอดนิยมอย่างรวดเร็วสำหรับการสร้างแอพ iOS และหนึ่งในสิ่งที่คุณใช้บ่อยที่สุดก็คือ ViewModifiers หากคุณเคยทำงานกับ SwiftUI ก่อนอ่านข้อความนี้ และไม่รู้ว่า ViewModifiers คืออะไร ฉันรับประกันได้ว่าคุณเคยใช้มันมาก่อนโดยไม่รู้ตัว

ViewModifiers เป็นวิธีการที่คุณเรียกใช้ Views ที่คุณใช้ในแอพของคุณเพื่อปรับแต่งรูปลักษณ์และพฤติกรรมของมัน คุณใช้มันเพื่อเปลี่ยนสีและขนาด เพิ่มท่าทาง เพิ่มตัวเลือกการช่วยการเข้าถึง ฯลฯ ให้กับ Views ของคุณ หากคุณเคยใช้.backgroundหรือ.foregroundColorในโครงการของคุณ สิ่งเหล่านี้คือตัวอย่างของ ViewModifiers

คุณใช้ ViewModifiers อย่างไร

เริ่มต้นด้วยการสร้างโปรเจ็กต์ ฉันจะไม่ทำให้คุณเบื่อกับกระบวนการทั้งหมด ดังนั้นอย่าลืมเลือก SwiftUI แทน Storyboard เมื่อสร้างโปรเจ็กต์

มุมมองเริ่มต้นที่สร้างขึ้นสำหรับคุณใช้ตัวปรับแต่งบางอย่างแล้ว ลองมาดูกัน

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

• .padding: ให้คุณระบุช่องว่างภายในสำหรับมุมมองของคุณ โปรดทราบว่าเนื่องจากเราไม่ได้ระบุค่าใด ๆ จึงใช้ช่องว่างเริ่มต้นของระบบสำหรับทุกด้าน คุณสามารถระบุขอบและค่าเช่นนี้.padding(.top, 12)หรือ.padding(.horizontal, 12)ตัวอย่าง
• .foregroundColor: จะตั้งค่าสีพื้นหน้าสำหรับมุมมอง ส่งผลต่อสีข้อความ สีอ่อน ฯลฯ

• .frame: ใช้เพื่อเปลี่ยนขนาดของมุมมอง
• .font: ใช้เพื่อเปลี่ยนตระกูลฟอนต์ ขนาด ฯลฯ สำหรับ aText

ก่อนที่เราจะเริ่ม เรามาทบทวนข้อจำกัดที่เราต้องการใช้บนปุ่ม — ระยะห่างจากขอบ รัศมีมุม สีพื้นหลัง

เริ่มต้นด้วยการเพิ่มปุ่มง่ายๆ พร้อมข้อความ:

Button(action: {
    // On click
}) {
    Text("Label")
}

หลังจากเพิ่มตัวดัดแปลงของเราแล้ว:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

      
                

                    
                    
                
            

ตัวอย่างด้านบนนั้นเรียบง่ายมาก แต่ถ้าโปรเจกต์ของคุณมี Views มากมายที่มีลักษณะคล้ายกัน (ค่าการเติมทั่วไป สีพื้นหลังที่เป็นธีม ฯลฯ) อาจสร้างความรำคาญได้อย่างรวดเร็วหากต้องแก้ไขซ้ำสิ่งเดิม โชคดีที่ SwiftUI ให้คุณสร้างตัวดัดแปลงของคุณเองได้

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

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

      
                

                    
                    
                
            

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()