SwiftUI: Apa itu ViewModifiers?

SwiftUI dengan cepat menjadi pilihan populer untuk membuat aplikasi iOS, dan salah satu hal paling umum yang Anda gunakan adalah ViewModifiers. Jika Anda telah bekerja dengan SwiftUI sebelum membaca ini dan tidak tahu apa itu ViewModifiers, saya jamin Anda telah menggunakannya sebelumnya tanpa menyadarinya.

ViewModifiers adalah metode yang Anda panggil pada Tampilan yang Anda gunakan di aplikasi untuk menyesuaikan tampilan dan perilakunya. Anda menggunakannya untuk mengubah warna dan ukuran, untuk menambahkan gerakan, untuk menambahkan opsi aksesibilitas dll ke Tampilan Anda, jika Anda pernah menggunakan .backgroundatau .foregroundColordalam proyek Anda, ini adalah contoh ViewModifiers.

Bagaimana Anda menggunakan ViewModifiers?

Mari kita mulai dengan membuat sebuah proyek, saya tidak akan membuat Anda bosan dengan seluruh proses jadi pastikan untuk memilih SwiftUI daripada Storyboard saat membuat proyek Anda.

Tampilan default yang dibuat untuk Anda sudah menggunakan beberapa pengubah jadi mari kita lihat itu

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

• .padding: Memungkinkan Anda menentukan padding untuk Tampilan Anda, perhatikan bahwa karena kami tidak memberikan nilai apa pun, ini menerapkan padding default sistem untuk semua sisi. Anda dapat menentukan tepi dan nilai seperti ini .padding(.top, 12)atau .padding(.horizontal, 12)misalnya
• .foregroundColor: Akan mengatur warna latar depan untuk tampilan, memengaruhi warna teks, rona, dll

• .frame: Digunakan untuk mengubah ukuran Tampilan
• .font: Digunakan untuk mengubah jenis font, ukuran dll untuk aText

Sebelum kita mulai, mari tinjau kendala yang ingin kita gunakan pada tombol — Padding, Corner radius, Background Color.

Mari kita mulai dengan menambahkan tombol sederhana dengan beberapa teks:

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

Setelah menambahkan pengubah kami:

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

      
                

                    
                    
                
            

Contoh di atas sangat sederhana tetapi jika proyek Anda memiliki banyak Tampilan dengan gaya yang serupa (nilai padding umum, warna latar bertema, dll), itu bisa sangat mengganggu dengan sangat cepat karena harus mengulangi pengubah yang sama. Untungnya SwiftUI memungkinkan Anda membuat pengubah kustom Anda sendiri.

Mari kita perhatikan contoh di atas, jika Anda melihat teks tombol tidak persis sama dengan apa yang kami coba buat. Mari buat pengubah khusus untuk teks tombol:

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()