Published on: Friday, February 13, 2026

Maxsus ro'yxat qatorlari

Authors

Name
ShoxruxC
@iOSdasturchi

Maxsus ro'yxat qatorlari

Text bir qatorni to'ldirishi mumkin — lekin real ilovalar kamdan-kam shunday oddiy bo'ladi. Kitoblar ro'yxati ikonka, sarlavha va muallif ko'rsatadi. Kontaktlar ro'yxati avatar, ism va oxirgi xabarni ko'rsatadi. Sozlamalar ekranida ikonka, sarlavha va ba'zan o'ng tomonda qiymat bo'ladi.

Mana shu yerda maxsus qator view-lari kerak. Har bir qator uchun kodni alohida view struct-iga ajratish — kodni o'qilishini yaxshilaydi, ota-ona faylni ifloslantirmaydi va bir joyda o'zgartirish barcha qatorlarga ta'sir qiladi.

Qator view-lari boshqa SwiftUI view-laridan farq qilmaydi — ular faqat List yoki ForEach ichida ishlatiladi.

Swift•

ContentView.swift

import SwiftUI

struct Kitob: Identifiable {
let id = UUID()
let nomi: String
let muallifi: String
let janr: String
}

// Alohida view struct — har bir qator uchun
struct KitobQatori: View {
let kitob: Kitob

  var body: some View {
      HStack(spacing: 12) {
          // SF Symbol placeholder rasm sifatida
          Image(systemName: "book.fill")
              .font(.title2)
              .foregroundStyle(.blue)
              .frame(width: 40)

          VStack(alignment: .leading, spacing: 2) {
              Text(kitob.nomi)
                  .font(.headline)
              Text(kitob.muallifi)
                  .font(.caption)
                  .foregroundStyle(.secondary)
          }
          Spacer()
          Text(kitob.janr)
              .font(.caption)
              .foregroundStyle(.secondary)
      }
      .padding(.vertical, 4)
  }

}

struct ContentView: View {
let kitoblar = [
Kitob(nomi: "Dune", muallifi: "Frank Herbert", janr: "Fantastika"),
Kitob(nomi: "1984", muallifi: "George Orwell", janr: "Distopiya"),
Kitob(nomi: "Hobbit", muallifi: "J.R.R. Tolkien", janr: "Fantaziya"),
]

  var body: some View {
      NavigationStack {
          List(kitoblar) { kitob in
              KitobQatori(kitob: kitob)
          }
          .navigationTitle("Kitoblar")
      }
  }

}

Qator patternlari

Ikonka + sarlavha (Label)

struct SozlamalarQatori: View {
    let ikonka: String
    let sarlavha: String
    let rang: Color

    var body: some View {
        Label(sarlavha, systemImage: ikonka)
            .foregroundStyle(rang)
    }
}

Label — ikonka + matn juftligining qisqa yozilishi. Tizim spacing va o'lchamni avtomatik boshqaradi.

Chap kontent + o'ng detal

HStack {
    VStack(alignment: .leading) {
        Text(kitob.nomi).font(.headline)
        Text(kitob.muallifi).font(.caption)
    }
    // Spacer qolgan joyni egallaydi — o'ng detalni chetga itaradi
    Spacer()
    Text(kitob.janr)
        .font(.caption)
        .foregroundStyle(.secondary)
}

Thumbnail + ko'p qatorli matn

HStack(spacing: 12) {
    Image(systemName: "photo")
        .resizable()
        .scaledToFill()
        .frame(width: 56, height: 56)
        .clipShape(RoundedRectangle(cornerRadius: 8))
        .background(Color.gray.opacity(0.2))

    VStack(alignment: .leading, spacing: 2) {
        Text(kitob.nomi).font(.headline)
        Text(kitob.muallifi).font(.subheadline).foregroundStyle(.secondary)
        Text(kitob.janr).font(.caption).foregroundStyle(.tertiary)
    }
}

Musiqa, podcast va kitob ilovalardagi uch qatorli thumbnail patterni. .clipShape(RoundedRectangle(...)) yumaloq burchakli qiladi.

Keng tarqalgan xato: Qator tanasiga juda ko'p mantiq solish. Agar qator hisob-kitob qila boshlasa, ma'lumot yuklasa yoki har view uchun bir nechta modifikatordan ko'proq ishlasa, kichik komponentlarga ajrating yoki mantiqni view model ga o'tkazing. Qatorlar joylashuvni tasvirlashi kerak, qiymatlarni hisoblashi emas.

Tezkor ma'lumotnoma

Pattern	Qachon ishlating
Faqat matn	Matn hal qiluvchi bo'lganda
HStack + ikonka + VStack	Eng keng tarqalgan — chap ikonka, o'ng sarlavha+taglavha
HStack + Spacer() + o'ng matn	O'ng tomonda narx, sana yoki holat kerak bo'lganda
HStack + thumbnail + VStack	Media ilovalar uchun rasm identifikatsiya qismida bo'lganda
`Label(sarlavha, systemImage:)`	Maxsus layout kerak bo'lmaganda tezkor ikonka+matn

Topshiriq: podcast qatori

Podcast struct yarating (id, nomi, podkastchi, davomiyligi). Kamida 4 ta element bilan @State massiv yarating. Har birini alohida PodcastQatori view-da ko'rsating: chap tomonda doira ikonka, o'rtada nom+podkastchi, o'ngda davomiylik matni. Simulyatorda tekshiring.