ButtonStyle di SwiftUI

SwiftUI menyediakan cara ampuh untuk membuat dan menyesuaikan tampilan menggunakan protokol gaya. Protokol ini memungkinkan kami untuk menentukan tampilan dan nuansa tampilan kami dalam satu baris kode.

Hasilnya, tampilannya konsisten secara visual, membuat aplikasi lebih mudah digunakan dan lebih menarik.

Tombol Styling tanpa ButtonStyle

Kita bisa menata tombol kita sebaris dengan menerapkan pengubah yang berbeda padanya. Pertimbangkan contoh ini:

Button("Tap me") {}
    .font(.system(.callout, weight: .bold))
    .foregroundColor(.white)
    .frame(maxWidth: .infinity, maxHeight: 48)
    .background(.blue)
    .cornerRadius(8)

Pendekatan ini benar-benar baik jika Anda mendesain satu tombol. Tetapi jika Anda perlu mengembangkan banyak tombol dengan gaya yang sama, Anda perlu menggunakan protokol ButtonStyle. Ini akan membantu berbagi dan menerapkan gaya yang sama ke berbagai tombol di seluruh aplikasi.

Tombol Styling dengan ButtonStyle

Mari buat gaya tombol ubahsuaian bernama PrimaryButtonStyle. Ini adalah gaya yang digunakan untuk tombol utama di seluruh aplikasi.

Mari kita lihat contoh ini:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(.blue)
            .cornerRadius(8)
    }
}

Untuk menerapkan gaya tombol yang dibuat, coba tulis ini:

Button("Tap me") {}
    .buttonStyle(PrimaryButtonStyle())

Konfigurasi Gaya Tombol

Objek konfigurasi tombol memiliki beberapa properti, termasuk isPressednilai boolean, yang menunjukkan apakah tombol sedang ditekan atau tidak. Kami dapat menggunakannya untuk mengubah gaya tombol kami saat pengguna mengetuk tombol. Untuk melakukan itu, kita bisa menulis sesuatu seperti ini:

struct PrimaryButtonStyle: ButtonStyle {
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .font(.system(.callout, weight: .bold))
            .foregroundColor(.white)
            .frame(maxWidth: .infinity, maxHeight: 48)
            .background(configuration.isPressed ? .blue.opacity(0.75) : .blue)
            .cornerRadius(8)
    }
}

Kiat pro

Kode kita dapat dibuat lebih bersih dan lebih mudah dibaca dengan menambahkan ekstensi berikut ke PrimaryButtonStyle:

extension ButtonStyle where Self == PrimaryButtonStyle {
    
    static var primary: PrimaryButtonStyle {
        PrimaryButtonStyle()
    }
}

Button("Tap me") {}
    .buttonStyle(.primary)

Dengan ButtonStyle, kita dapat menentukan tampilan, tata letak, dan interaksi tombol dan memastikan konsistensi di seluruh aplikasi.

Selain itu, ini menyediakan cara untuk mengenkapsulasi logika dan gaya terkait tombol ke dalam komponen yang dapat digunakan kembali. Ini membuat basis kode lebih dapat dipelihara dan diskalakan.

Terima kasih sudah membaca!

Jika menurut Anda artikel ini bermanfaat, pastikan untuk memberikan tepuk tangan agar orang lain dapat menemukannya dengan lebih mudah.