SwiftUI'da custom ViewModifier yaratish

Nima uchun Custom ViewModifier kerak?

SwiftUI da biz deyarli har qadamda modifier lardan foydalanamiz: .font(), .foregroundColor(), .background() va hokazo. Bularning barchasi aslida ViewModifier hisoblanadi. Ular mavjud View (kontent) ni oladi va unga qo'shimchalar qo'shib, o'zgartirilgan (modified) View ni qaytaradi.

Dastur tuzish davomida bir xil dizayndagi tugmani (masalan, ko'k fonda oq yozuvli, soyasi bor va chetlari yumaloq) o'nlab joyda ishlatishga to'g'ri keladi. Ularning har biriga qayta-qayta kod yozish o'rniga, dizaynni bir marta Custom ViewModifier ichiga yozib, qolgan barcha joylarda uni chaqirish orqali loyihani boshqarishni juda osonlashtirishimiz mumkin.

ViewModifier yaratish

Yangi ViewModifier yaratish uchun ViewModifier protokolidan foydalanamiz va unga body funksiyasini yozishimiz shart:

import SwiftUI

struct DefaultButtonViewModifier: ViewModifier {
    // Modifierga parametrlar uzatish ham mumkin
    var backgroundColor: Color = .blue

    func body(content: Content) -> some View {
        content
            .foregroundColor(.white)
            .frame(height: 55)
            .frame(maxWidth: .infinity)
            .background(backgroundColor)
            .cornerRadius(10)
            .shadow(radius: 10)
    }
}

Muhim maslahat: Dizayn modifierlari ichiga imkon qadar .font() yoki tashqi .padding() kabi xususiyatlarni qo'shmang. Sababi bu modifier turli xil o'lchamdagi ekran va joylarga tushishi mumkin, Shrift va tashqi oraliqni o'sha View ni ishlatayotgan joyning o'zida bergan ma'qul.

Extension orqali qulaylashtirish

Yaratilgan ViewModifier ni .modifier(DefaultButtonViewModifier()) tarzida ishlatsa bo'ladi. Ammo, SwiftUI'ga xos bo'lgan qisqa kodlash uslubiga o'tkazish uchun uni View ga extension (kengaytma) sifatida yozib olgan ma'qul:

extension View {
    // Istalgan View'ga tayyor formatlash funksiyasini ulash
    func withDefaultButtonFormatting(backgroundColor: Color = .blue) -> some View {
        modifier(DefaultButtonViewModifier(backgroundColor: backgroundColor))
    }
}

Natijani sinab ko'ramiz

Endi barcha kodlarni bir joyga yig'amiz:

struct ViewModifierBootcamp: View {
    var body: some View {
        VStack(spacing: 20) {
            Text("Hello, World!")
                .font(.headline)
                .withDefaultButtonFormatting() // Default ko'k rang

            Text("Hello, Everyone!")
                .font(.subheadline)
                .withDefaultButtonFormatting(backgroundColor: .orange) // Apelsin rang

            Text("Hello!")
                .font(.title)
                .withDefaultButtonFormatting(backgroundColor: .pink) // Pushti rang
        }
        .padding()
    }
}

Yuqoridagi uslub yordamida bitta qator kod yozish bilan oldindan tayyorlab qo'yilgan murakkab UI formatlarini View'laringizga tadbiq qilishingiz mumkin. Bu sizga katta loyihalarda har bir dizayn elementini yagona joydan boshqarish (Single Source of Truth) imkonini beradi.