Published on: Monday, April 20, 2026

Maxsus komponentlar va qayta ishlatiladigan viewlar

Authors

Name
ShoxruxC
@iOSdasturchi

Bir xil SwiftUI kodni uch yoki undan ko'p joyga nusxalaganingizni sezsangiz — uni qayta ishlatiladigan komponentga chiqarish vaqti keldi. Bu uch qoidasi: uch joyda bir pattern — standartlashtirishga arziydi.

LEGO g'ishtini tasavvur qiling. G'isht final modelda qayerda bo'lishini bilmaydi — faqat o'z shakli va rangini biladi. Buni qo'yganda tafsilotlarni belgilaysiz. Parameterized SwiftUI komponenti xuddi shunday ishlaydi.

Swift•

StatCard.swift

import SwiftUI

// Qayta ishlatiladigan stat karti — istalgan joyda ishlatiladigan
struct StatCard: View {
// Xususiyatlar komponentni call site da sozlash imkonini beradi
let title: String
let value: String
let icon: String
var accentColor: Color = .blue // Standart qiymat — ixtiyoriy

  var body: some View {
      VStack(alignment: .leading, spacing: 8) {
          // Injeksiya qilingan symbol nomi va rang bilan ikonka qatori
          Label(title, systemImage: icon)
              .font(.caption)
              .foregroundStyle(accentColor)

          // Asosiy qiymat, yaqqol ko'rsatilgan
          Text(value)
              .font(.title2.bold())
              .foregroundStyle(.primary)
      }
      .padding()
      .background(.regularMaterial)
      .clipShape(RoundedRectangle(cornerRadius: 12))
  }

}

// Komponentdan foydalanish — har xil ma'lumot, bir xil vizual tuzilma
struct DashboardView: View {
var body: some View {
HStack {
StatCard(title: "Qadam", value: "8,421",
icon: "figure.walk", accentColor: .green)
StatCard(title: "Kaloriya", value: "542",
icon: "flame.fill", accentColor: .orange)
StatCard(title: "Uyqu", value: "7s 20d",
icon: "moon.fill", accentColor: .indigo)
}
.padding()
}
}

Qator	Vazifasi
`struct StatCard: View`	Yangi SwiftUI ko'rinish e'lon qiladi — Stage 1 dan beri bir xil pattern, farqi qayta ishlatish uchun mo'ljallangan.
`let title: String`	Majburiy xususiyat — `StatCard` yaratuvchi sarlavha uzatishi shart. Swift buni kompilyatsiyada tekshiradi.
`var accentColor: Color = .blue`	Standart qiymatli ixtiyoriy xususiyat. Rang uzatilmasa ko'k ishlatiladi — call site ni toza saqlaydi.
`.background(.regularMaterial)`	Muzli shisha effekti — yorug' va qorong'u rejimga avtomatik moslashadi. Qo'shimcha ish kerak emas.

Komponent patternlari

// @ViewBuilder — chaqiruvchiga istalgan ko'rinishni uzatish imkoni
struct CardContainer<Content: View>: View {
    let content: Content

    init(@ViewBuilder content: () -> Content) {
        self.content = content()
    }

    var body: some View {
        content
            .padding()
            .background(.regularMaterial)
            .clipShape(RoundedRectangle(cornerRadius: 12))
    }
}

// Foydalanish — istalgan ko'rinish qavs ichiga
CardContainer {
    Text("Bu yerga istalgan narsa")
}
CardContainer {
    VStack {
        Image(systemName: "star.fill")
        Text("Sevimli")
    }
}

// Custom ViewModifier — modifikatorlar to'plamini birlashtirish
struct PrimaryButtonStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.headline)
            .foregroundStyle(.white)
            .padding(.horizontal, 24)
            .padding(.vertical, 12)
            .background(.blue)
            .clipShape(Capsule())
    }
}

// Extension — o'rnatilgan modifier sintaksida chaqirish
extension View {
    func primaryButton() -> some View {
        modifier(PrimaryButtonStyle())
    }
}

// Foydalanish — har qanday ko'rinishga
Button("Saqlash") { }
    .primaryButton()

Text("Belgilash")
    .primaryButton()

Tezkor ma'lumotnoma

Pattern	Ishlatish holati
`struct MeningKarti: View`	Bir xil UI pattern ≥3 joyda — parametrlashtiring
`@ViewBuilder content`	Chaqiruvchi istalgan ko'rinishni uzatishi kerak
`ViewModifier protokoli`	Modifikatorlar to'plamini birlashtirish
`extension View { func ... }`	Modifier ni o'rnatilgan kabi chaqirish
Xcode → Extract Subview	Ko'rinishni avtomatik struct ga ajratadi

🎯 Topshiriq: qayta ishlatiladigan karta komponenti

Uch xususiyatli — title: String, subtitle: String, icon: String — InfoCard komponenti yarating. Kamida uch joyda har xil ma'lumot bilan ishlating. Keyin PrimaryButtonStyle ViewModifier yarating va uni uch xil tugmaga qo'llang. Dizaynni bir joyda o'zgartiring — hamma joyda yangilanishini tasdiqlang.