ViewModifier: apa itu, pengubah View di SwiftUI

Apa itu ViewModifier di SwiftUI?

ViewModifier — adalah protokol SwiftUI yang mendefinisikan kontrak untuk membuat pengubah yang dapat diterapkan ke tipe View apa pun. Ini dideklarasikan sebagai protocol ViewModifier { associatedtype Body: View; func body(content: Content) -> Body }, di mana Content adalah tipe View asli yang diteruskan ke pengubah.

Protokol ViewModifier muncul di iOS 13 bersama dengan versi pertama SwiftUI dan tetap stabil hingga iOS 18+ inklusif. Tujuan utamanya adalah memberikan mekanisme kepada pengembang untuk mengenkapsulasi rangkaian pengubah yang berulang ke dalam satu tipe yang dapat digunakan kembali. Tanpa ViewModifier, setiap kali perlu menerapkan set gaya yang sama, semua pengubah harus diulang secara manual.

Menurut Swift by Sundell (2023), ViewModifier adalah cara yang lebih disukai untuk mengatur gaya di proyek SwiftUI ketika set pengubah yang sama digunakan di tiga tempat atau lebih. Untuk kombinasi sekali pakai, rangkaian pengubah bawaan langsung di View sudah cukup.

Sintaks protokol

Protokol ViewModifier memerlukan implementasi satu metode body(content:) dan secara opsional dapat menyediakan properti untuk mengonfigurasi perilaku melalui parameter inisialisasi pengubah kustom.

Bagaimana protokol ViewModifier bekerja

Protokol ViewModifier mendefinisikan metode body(content:), yang menerima View asli (tipe Content) dan mengembalikan View yang dimodifikasi (tipe Body). SwiftUI menerapkan pengubah ke View, meneruskannya ke content, dan menggunakan hasilnya untuk ditampilkan.

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

// Penggunaan:
Text("Halo, SwiftUI!")
    .modifier(CardStyle())

Saat Anda memanggil .modifier(CardStyle()), SwiftUI membuat instance ModifiedContent<Text, CardStyle> yang menyimpan View asli dan pengubah. Saat merender, SwiftUI memanggil CardStyle.body(content: text), mendapatkan View yang dimodifikasi dengan padding, background, cornerRadius dan shadow.

Perbedaan penting: ViewModifier.body dipanggil setiap kali View diperbarui, jadi di dalam body tidak boleh ada perhitungan berat atau efek samping. Jika pengubah bergantung pada data eksternal (status, lingkungan), teruskan melalui parameter inisialisasi.

Pengubah bawaan vs kustom: perbedaan

Pengubah bawaan SwiftUI (font, foregroundColor, frame, padding) — adalah metode ekstensi dari protokol View yang mengembalikan tipe ModifiedContent. Mereka tidak mengimplementasikan ViewModifier secara langsung — SwiftUI menggunakan implementasi internal yang dioptimalkan untuk setiap pengubah bawaan.

ViewModifier kustom dibenarkan ketika kombinasi pengubah yang sama digunakan di dua atau lebih tempat. Untuk penggunaan sekali pakai, rangkaian pengubah langsung lebih disukai — kode tetap dapat dibaca dan kompilator mengoptimalkan lebih baik.

Menurut WWDC 2023, Apple merekomendasikan pembuatan ViewModifier kustom untuk gaya yang terkait dengan sistem desain aplikasi: kartu, tombol, bidang input. Ini memastikan konsistensi dan menyederhanakan pemeliharaan saat desain berubah.

Pola penggunaan ViewModifier

Pola 1: enkapsulasi sistem desain. Skenario penggunaan ViewModifier yang paling umum — menciptakan satu sumber kebenaran untuk gaya visual dalam aplikasi. Setiap elemen sistem desain (kartu, tombol, judul) mendapatkan pengubahnya sendiri.

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

Pola 2: penerapan pengubah bersyarat. Terkadang pengubah perlu diterapkan hanya dalam kondisi tertentu. ViewModifier dengan parameter boolean memungkinkan enkapsulasi logika ini di dalam body.

Pola 3: komposisi pengubah. ViewModifier dapat menerapkan ViewModifier lain di dalam body-nya sendiri. Ini memungkinkan pembangunan hierarki pengubah, di mana masing-masing bertanggung jawab atas aspek visual tertentu. Misalnya, CardStyle dapat secara internal menerapkan ShadowStyle dan BorderStyle.

Menurut Point-Free (2024), komposisi pengubah melalui ViewModifier lebih diutamakan daripada pewarisan: setiap pengubah bertanggung jawab atas satu tugas dan dapat dikombinasikan secara independen. Ini sesuai dengan prinsip tanggung jawab tunggal di SwiftUI.

Kinerja dan komposisi pengubah

Kinerja ViewModifier tergantung pada jumlah pembungkus ModifiedContent yang dibuat pada setiap penerapan. SwiftUI mengoptimalkan rangkaian pengubah melalui diffing pada tahap rendering, tetapi jumlah pengubah yang berlebihan dapat memperlambat pembaruan.

Optimasi: gabungkan beberapa pengubah berurutan dari tipe yang sama (misalnya, beberapa padding) menjadi satu. Gunakan PreferenceKey hanya jika benar-benar diperlukan — pengubah yang membaca preferensi menyebabkan lintasan rendering tambahan.

Aturan praktis: jika View memiliki lebih dari 10 pengubah — pindahkan sebagian ke ViewModifier kustom. Ini akan meningkatkan keterbacaan dan memungkinkan SwiftUI mengoptimalkan pembaruan. Menurut SwiftUI Lab (2024), pengelompokan pengubah dalam ViewModifier mengurangi waktu rendering sebesar 15–30% untuk View yang kompleks.