Profil kartasini yaratish

Bu Stage 1 bosqichidagi barcha o'rganilgan mavzularni birlashtiradigan kichik loyiha (mini-loyiha) hisoblanadi. Siz faqat shu paytgacha o'rgangan narsalaringizdan foydalanib, butunlay noldan boshlab aylanma avatar, ism, sarlavha, statistika qatori va follow tugmasidan iborat mukammal profil kartasini yaratasiz.

Ushbu darsda yangi tushunchalar o'rganilmaydi. Bu yerda hamma narsa Text, Image, VStack, HStack, ZStack va modifikatorlardan iborat. Yangilik shundaki, biz ularni birgalikda maqsadli tarzda yig'amiz, kod yozishdan oldin tartib (layout) haqida o'ylaymiz va yakunda haqiqiy ilovalarga mos keladigan interfeysni yaratamiz.

Har bir qadamni ketma-ketlikda bajaring. Keyingi bosqichga o'tishdan oldin canvas preview oynangizni tekshirib boring. Maqsad tezroq tugatish emas, balki har bir qismning nima qilayotganini va nima uchun kerakligini tushunib yetishdir.

1-qadam: avatar

Yangi ContentView ochib, ishlashni avval avatardan boshlang. Profil rasmi kabi ko'rinishi uchun shakllantirilgan aylanma SF Symbol ikonkasini yarating.

Swift•

Faqat avatar ko'rinishi

import SwiftUI

struct ContentView: View {
var body: some View {
// Profil rasmi o'rnini bosuvchi katta shaxs ikonkasidan foydalanamiz
Image(systemName: "person.circle.fill")
// SF Symbol ikonkasini katta hajmda kattalashtiramiz
.font(.system(size: 90))
// Profil rasmi hissini berish uchun uni ko'k rangga bo'yaymiz
.foregroundStyle(.blue)
}
}

2-qadam: ism va sarlavhani qo'shish

Avatarni VStack konteyneriga o'rab oling, uning tagiga ism va taglavhani qo'shing.

Swift•

Ism va sarlavha qo'shilgan holati

import SwiftUI

struct ContentView: View {
var body: some View {
// VStack avatarni va matnli ma'lumotlarni vertikal va markazlashgan holda ushlab turadi
VStack(spacing: 8) {
// 1-qadamdagi avatar
Image(systemName: "person.circle.fill")
.font(.system(size: 90))
.foregroundStyle(.blue)

          // To'liq ism qalin va ko'zga tashlanadigan uslubda
          Text("Chris Ching")
              .font(.title2)
              .fontWeight(.bold)

          // Kichikroq va xiralashgan uslubdagi taglavha yoki lavozim
          Text("iOS dars beruvchi & dastur ishlab chiqaruvchi")
              .font(.subheadline)
              .foregroundStyle(.secondary)
      }
  }

}

3-qadam: statistika qatorini qo'shish

Ism ostiga gorizontal statistika qatorini qo'shing. Spacer yordamida teng ravishda taqsimlangan uchta statistika — Postlar, Kuzatuvchilar, Kuzatilayotganlar joylashadi.

Swift•

Statistika qatori qo'shilgan holati

import SwiftUI

struct ContentView: View {
var body: some View {
VStack(spacing: 16) {
Image(systemName: "person.circle.fill")
.font(.system(size: 90))
.foregroundStyle(.blue)

          VStack(spacing: 4) {
              Text("Chris Ching")
                  .font(.title2)
                  .fontWeight(.bold)
              Text("iOS dars beruvchi & dastur ishlab chiqaruvchi")
                  .font(.subheadline)
                  .foregroundStyle(.secondary)
          }

          // Buni taglavha yozilgan Text ostiga, tashqi VStack ichiga qo'shing
          HStack {
              // Har bir statistika raqam va yozuvdan iborat VStack hisoblanadi
              VStack {
                  Text("248").font(.title3).fontWeight(.bold)
                  Text("Postlar").font(.caption).foregroundStyle(.secondary)
              }

              // Spacer statistikalarni to'liq kenglik bo'ylab ikki chetga surib tarqatadi
              Spacer()

              VStack {
                  Text("12.4K").font(.title3).fontWeight(.bold)
                  Text("Kuzatuvchilar").font(.caption).foregroundStyle(.secondary)
              }

              Spacer()

              VStack {
                  Text("540").font(.title3).fontWeight(.bold)
                  Text("Kuzatilayotganlar").font(.caption).foregroundStyle(.secondary)
              }
          }
          .padding(.horizontal)
      }
  }

}

4-qadam: kuzatish tugmasi va yakuniy padding'ni qo'shish

Eng oxirgi qism — butun kenglik bo'ylab cho'zilgan Kuzatish tugmasi va kartaga biroz erkin nafas berish uchun umumiy padding qo'llash.

Swift•

Tugma va padding qo'shilgan holati

import SwiftUI

struct ContentView: View {
var body: some View {
VStack(spacing: 16) {
Image(systemName: "person.circle.fill")
.font(.system(size: 90))
.foregroundStyle(.blue)

          VStack(spacing: 4) {
              Text("Chris Ching")
                  .font(.title2)
                  .fontWeight(.bold)
              Text("iOS dars beruvchi & dastur ishlab chiqaruvchi")
                  .font(.subheadline)
                  .foregroundStyle(.secondary)
          }

          HStack {
              VStack {
                  Text("248").font(.title3).fontWeight(.bold)
                  Text("Postlar").font(.caption).foregroundStyle(.secondary)
              }
              Spacer()
              VStack {
                  Text("12.4K").font(.title3).fontWeight(.bold)
                  Text("Kuzatuvchilar").font(.caption).foregroundStyle(.secondary)
              }
              Spacer()
              VStack {
                  Text("540").font(.title3).fontWeight(.bold)
                  Text("Kuzatilayotganlar").font(.caption).foregroundStyle(.secondary)
              }
          }
          .padding(.horizontal)

          // Buni HStack statistika qatori ostiga, tashqi VStack ichiga qo'shing
          Button(action: {
              // Amaliyot 2-bosqichda holat (state) haqida o'rganganimizda bu yerga yoziladi
          }) {
              // To'liq asosiy tugma kabi shakllantirilgan tugma yorlig'i
              Text("Kuzatish")
                  .font(.headline)
                  .foregroundStyle(.white)
                  .frame(maxWidth: .infinity)
                  .padding()
                  .background(.blue)
                  .cornerRadius(12)
          }
      }
      // Modifikatorlar yordamida tashqi VStack uchun umumiy padding va yuqori masofani qo'llaymiz
      // Modifikator tashqi VStack-ning yopuvchi qavsiga qo'yiladi
      .padding()
      .padding(.top, 20)
  }

}

💡 Siz hozirgina haqiqiy narsa yaratdingiz:
Canvas preview oynasida ko'rib turganingiz professional darajadagi haqiqiy SwiftUI komponentidir. Ushbu tartib andozasi — avatar, ism, statistika va harakat tugmasi — Twitter, Instagram, LinkedIn, GitHub va yuzlab boshqa ilovalarda uchraydi. Uni yaratish uchun hozirgina ishlatgan fundamental tushunchalaringiz barchasining asosida yotadi.

⚠️ Tugma hozircha hech narsa qilmaydi:
Bu ataylab shunday qilingan. Ko'rinishlarni bosish va holat o'zgarishlariga javob beradigan qilish uchun @State kerak — bu Stage 2 darslarining mavzusidir. Hozircha asosiy maqsad tartibni qurishni o'rganish edi. Harakatlar keyinroq qo'shiladi.

To'liq profil kartasi

Swift•

To'liq ContentView kodi

import SwiftUI

struct ContentView: View {
var body: some View {
// Tashqi konteyner — hamma narsa vertikal ravishda 16pt masofa bilan joylashadi
VStack(spacing: 16) {
// Avatar
Image(systemName: "person.circle.fill")
.font(.system(size: 90))
.foregroundStyle(.blue)

          // Ism va taglavha qattiqroq masofa bilan guruhlangan
          VStack(spacing: 4) {
              Text("Chris Ching")
                  .font(.title2)
                  .fontWeight(.bold)
              Text("iOS dars beruvchi & dastur ishlab chiqaruvchi")
                  .font(.subheadline)
                  .foregroundStyle(.secondary)
          }

          // Statistika qatori
          HStack {
              VStack {
                  Text("248").font(.title3).fontWeight(.bold)
                  Text("Postlar").font(.caption).foregroundStyle(.secondary)
              }
              Spacer()
              VStack {
                  Text("12.4K").font(.title3).fontWeight(.bold)
                  Text("Kuzatuvchilar").font(.caption).foregroundStyle(.secondary)
              }
              Spacer()
              VStack {
                  Text("540").font(.title3).fontWeight(.bold)
                  Text("Kuzatilayotganlar").font(.caption).foregroundStyle(.secondary)
              }
          }
          .padding(.horizontal)

          // Kuzatish tugmasi — to'liq kenglikda, ko'k, burchaklari yumaloqlangan
          Button(action: {}) {
              Text("Kuzatish")
                  .font(.headline)
                  .foregroundStyle(.white)
                  .frame(maxWidth: .infinity)
                  .padding()
                  .background(.blue)
                  .cornerRadius(12)
          }
      }
      .padding()
      .padding(.top, 20)
  }

}

#Preview {
ContentView()
}

Sun'iy intellektdan chuqurroq o'rganish uchun foydalanish

1. Tushunchalarni chuqurlashtirish (ai'dan repetitor sifatida foydalaning):

"Men hozirgina yaratgan SwiftUI profil kartasi kodi: [kodni joylashtiring]. Layout ichidagi har bir VStack va HStack-ning vazifasini hech narsani o'zgartirmasdan tushuntirib bera olasizmi? Biror narsani o'zgartirishdan oldin har bir konteyner nima uchun u yerda ekanligini tushunib olishni xohlayman."
"Ushbu profil kartasi tartibiga qarab, agar men quyidagilarni xohlasam nimalarni o'zgartirishim kerak bo'ladi: (1) taglavha ostiga tarjimai hol (bio) matnini qo'shish, (2) avatarni aylanma shaklda hoshiya (border) bilan qilish, (3) "Follow" tugmasi yoniga "Message" tugmasini qo'shish? Kod yozmasdan, shunchaki qanday o'zgarishlar kiritishim kerakligini va qaysi tushunchalar ishtirok etishini tushuntiring."

2. Amaliy ko'rinish yaratish (xcode-da sinab ko'rish uchun):

"Boshqa layout uslubida SwiftUI profil kartasini yozib bering — masalan, avatar chap tomonda, ism, taglavha va statistika esa o'ng tomonda vertikal joylashgan gorizontal tartib (ixcham kontakt qatori kabi). Har bir qatorning tepasida tuzilish qarorlarini tushuntiruvchi izoh yozing. Faqat Text, Image, VStack, HStack va modifikatorlardan foydalaning — boshqa hech qanday tushuncha aralashmasin."

🎯 Topshiriq: profil kartasini moslashtirish

Siz hozirgina qurgan profil kartasini uchta usulda o'zgartiring. Birinchidan, urg'u (accent) rangini ko'kdan boshqa professional ko'rinadigan rangga o'zgartiring (yashil, indigo yoki to'q ko'k kabi ranglarni sinab ko'ring — qizil rangdan saqlaning, chunki u ogohlantirishni bildiradi). Ikkinchidan, taglavha ostiga to'rtinchi qatorni qo'shing: HStack ichida Image(systemName: "location.fill") ikonkasidan foydalangan holda joylashuv qatori bo'lsin. Uchinchidan, Kuzatish tugmasini "Kuzatilmoqda" deb o'zgartiring va uning fon rangini o'zgargan holatni bildirish uchun kulrang qiling. Siz buni 2-bosqichda interaktiv qilasiz — hozircha esa shunchaki statik ravishda to'g'ri ko'rinishga keltiring. Davom etishdan oldin canvas preview oynasida barcha o'zgarishlarni tekshiring.

Swift•

Topshiriq yechimi

import SwiftUI

struct ContentView: View {
var body: some View {
VStack(spacing: 16) {
// Avatar (urg'u rangini o'zgartirish)
Image(systemName: "person.circle.fill")
.font(.system(size: 90))
.foregroundStyle(.indigo)

          VStack(spacing: 4) {
              Text("Chris Ching")
                  .font(.title2)
                  .fontWeight(.bold)
              Text("iOS dars beruvchi & dastur ishlab chiqaruvchi")
                  .font(.subheadline)
                  .foregroundStyle(.secondary)

              // Joylashuv qatori qo'shilgan
              HStack(spacing: 4) {
                  Image(systemName: "location.fill")
                      .foregroundStyle(.indigo)
                  Text("Toronto, Kanada")
                      .font(.caption)
                      .foregroundStyle(.secondary)
              }
              .padding(.top, 2)
          }

          HStack {
              VStack {
                  Text("248").font(.title3).fontWeight(.bold)
                  Text("Postlar").font(.caption).foregroundStyle(.secondary)
              }
              Spacer()
              VStack {
                  Text("12.4K").font(.title3).fontWeight(.bold)
                  Text("Kuzatuvchilar").font(.caption).foregroundStyle(.secondary)
              }
              Spacer()
              VStack {
                  Text("540").font(.title3).fontWeight(.bold)
                  Text("Kuzatilayotganlar").font(.caption).foregroundStyle(.secondary)
              }
          }
          .padding(.horizontal)

          // Tugma "Kuzatilmoqda" va fon kulrang o'zgartirilgan
          Button(action: {}) {
              Text("Kuzatilmoqda")
                  .font(.headline)
                  .foregroundStyle(.primary)
                  .frame(maxWidth: .infinity)
                  .padding()
                  .background(Color.gray.opacity(0.2))
                  .cornerRadius(12)
          }
      }
      .padding()
      .padding(.top, 20)
  }

}

💡 Maslahat:
Joylashuv qatori uchun ikonka va matnni 4 masofali (spacing: 4) HStack ichiga o'rang. Ikonkaning foregroundStyle-ni siz tanlagan urg'u rangiga moslang. "Kuzatilmoqda" tugmasi uchun .background(.blue) modifikatorini .background(.gray.opacity(0.2)) modifikatoriga almashtiring, shuningdek .foregroundStyle(.white) o'rniga .foregroundStyle(.primary) yozing.

Stage 1 xulosasi: birinchi SwiftUI view'ingiz

Oltita darsdan so'ng, siz Swift mantiqidan ko'rinadigan, real UI (foydalanuvchi interfeysi) yaratishga qadam qo'ydingiz. Mana siz o'rgangan mavzular:

SwiftUI nima va u qanday fikrlaydi: Deklarativ fikrlash modeli — siz interfeys qanday ko'rinishi kerakligini tasvirlaysiz va SwiftUI uni render qilishni o'zi boshqaradi. Har bir SwiftUI View body xususiyatiga ega struct hisoblanadi.
Birinchi ko'rinishingiz: text, image, button: Har bir SwiftUI interfeysi quriladigan uchta asosiy ko'rinish va har bir SwiftUI faylida mavjud bo'lgan ContentView tuzilishi.
Modifikatorlar: Modifikatorlarni zanjir kabi ketma-ket ulash orqali viewlarni qanday jihozlash va formatlash, ularning tartibi nima uchun muhimligi hamda eng muhim modifikatorlar: font, foregroundStyle, padding, background, cornerRadius va frame.
VStack, HStack, ZStack: Viewlarni vertikal, gorizontal va qatlamlar shaklida joylashtiradigan uchta layout konteyneri hamda ularni ichma-ich joylashtirish va Spacer yordamida elementlar orasidagi masofani boshqarish.
Canvas preview va simulator: Canvas preview'dan samarali foydalanish, turli qurilma o'lchamlari va rang sxemalarida ko'rish, ilovangizni simulator-da ishga tushirish va preview qotib qolganda uni qayta tiklash.
Profil kartasini yaratish: 1.1-dan 1.5-gacha bo'lgan barcha o'rganilgan darslarni birlashtiruvchi to'liq mini-loyiha — Text, Image, VStack, HStack va modifikatorlar yordamida bosqichma-bosqich yig'ilgan professional darajadagi ko'rinish.

Agar darslar davomida biror topshiriqni (challenge) bajarmagan bo'lsangiz, orqaga qaytib ularni bajaring. Ayniqsa, profil kartasini ikki marta qurish tavsiya etiladi — birinchisida bosqichma-bosqich qo'llanmaga qarab, ikkinchisida esa butunlay noldan, kodga qaramasdan mustaqil ravishda. Aynan o'sha ikkinchi urinishda haqiqiy o'rganish sodir bo'ladi.

Stage 2 darslarida viewlaringiz jonlanadi. Siz State va ma'lumotlar oqimi (State and Data Flow) — viewlarni bosishga qanday javob beradigan qilish, foydalanuvchi kiritgan ma'lumotlarni kuzatish va ma'lumotlar o'zgarganda ekranni qanday avtomatik ravishda yangilashni o'rganasiz. Statik tartiblar — bu shunchaki boshlanishi. Ko'rinishlaringiz ma'lumotlarga mos ravishda reaksiyaga kirishishni boshlagach, siz haqiqiy ilova hissini beradigan dasturlarni yarata boshlaysiz.