Published on: Saturday, January 17, 2026

Birinchi ko'rinishingiz: text, image, button

Authors

Name
ShoxruxC
@iOSdasturchi

Bu darsda haqiqiy amaliyot boshlanadi. Siz ekranga o'zingizning birinchi viewlaringizni (view) joylashtirasiz va ularning canvas preview'da paydo bo'lishini ko'rasiz. Kodingizni yozgan zahoti ekranning o'ng tomonida tugma yoki matnning darhol paydo bo'lishi — bu juda yoqimli va qadrlashga arziydigan kichik yutuqlardan biridir. Bu jarayondan hech qachon zerikmaysiz.

SwiftUI-da har bir vizual element — bu ko'rinish (view). Text (matn) — bu view. Image (tasvir) — bu view. Button (tugma) — bu view. Ularning barchasi View protokoliga mos keladigan struct'lar (struktura) bo'lib, ContentView strukturasining body xususiyati (property) ichida joylashadi. Siz allaqachon struct va protokollar nimaligini bilasiz — bu darsda ularni juda amaliy, vizual tarzda ishlatilishini ko'rasiz.

Ushbu darsning oxiriga kelib, interfeysga Text, Image va Button viewlarini qanday joylashtirishni o'rganasiz hamda har bir SwiftUI fayli baham ko'radigan asosiy andoza tuzilishini tushunib olasiz.

ContentView andozasi (shablon)

Xcode dasturida aniq yangi SwiftUI loyihasini yaratganingizda, u avtomatik ravishda quyidagi ko'rinishdagi ContentView.swift faylini yaratadi:

Swift•

ContentView.swift andozasi

import SwiftUI

struct ContentView: View {
var body: some View {
Text("Hello, world!")
}
}

Qator	U nima vazifa bajaradi
`import SwiftUI`	Barcha viewlar, modifikatorlar va vositalardan foydalanish uchun SwiftUI freymvorkini yuklaydi. Buni har bir SwiftUI faylining eng yuqori qismida ko'rasiz.
`struct ContentView: View`	`ContentView` deb nomlangan yangi struct'ni aniqlaydi va uning `View` protokoliga mos kelishini bildiradi. `View` protokoliga mos keladigan har qanday turda `body` xususiyati bo'lishi shart.
`var body: some View`	Har bir ko'rinish (View) ega bo'lishi kerak bo'lgan majburiy xususiyat. U `some View` qaytaradi — ya'ni u qandaydir ko'rinishni qaytaradi, lekin uning tafsilotlarini SwiftUI hal qiladi. Siz bu yerda nimalar bo'lishini tasvirlaysiz.
`Text("Hello, world!")`	Siz uzatgan matnni ko'rsatadigan `Text` ko'rinishini yaratadi. Bu eng oddiy ko'rinish — birgina qator kod va u darhol ekranda paydo bo'ladi.

💡 some View nima?
some kalit so'zi "noaniq tur" (opaque type) degan ma'noni anglatadi. Siz Swift-ga: "bu View protokoliga mos keladigan qandaydir aniq turni qaytaradi, lekin men qaysi biri ekanligini aniq ko'rsatib o'tirmayman", deb aytasiz. Bu sizga har bir turning nomini yozib o'tirmasdan, bir nechta viewlarning murakkab kombinatsiyalarini qaytarish imkonini beradi. Hozircha some Viewni har bir ko'rinish bodysining qaytaruvchi turi deb qabul qiling.

Uchta asosiy ko'rinish

TextEkranda matn qatorini ko'rsatadi.

Swift•

Text ko'rinishi

// Text unga uzatgan har qanday matnni ko'rsatadi
Text("SwiftUI-ga xush kelibsiz")

Text — bu SwiftUI-dagi eng asosiy qurilish blokidir. Unga xohlagan matnni (String) uzating va u uni ekranda tizim shriftida render qiladi. Siz unga shrift o'lchami, rangi, qalinligi va boshqalarni sozlash uchun modifikatorlarni bog'laysiz — bu haqida keyingi darsda batafsil gaplashamiz.

ImageSF Symbols-dan belgi (icon) yoki loyihadagi rasmlaringizdan birini ko'rsatadi.

Swift•

Image ko'rinishi (SF Symbols)

// SF Symbols'dan (Apple bepul ikona kutubxonasi) ikonani yuklash uchun systemName ishlating
Image(systemName: "star.fill")

// Yoki Assets.xcassets papkasiga qo'shgan rasmingizni yuklang
// Image("profil-rasmi")

Image ko'rinishining ikkita keng tarqalgan shakli mavjud. systemName: tizimi SF Symbols — Apple'ning har qanday ilovada bepul foydalanish mumkin bo'lgan minglab ikonalar kutubxonasidan belgilarni yuklaydi. Ikkinchi shakli esa siz loyihangizning assets papkasiga qo'shgan rasmlarni yuklaydi. SwiftUI faoliyatingiz davomida SF Symbols kutubxonasidan juda ko'p foydalanasiz.

ButtonBosilganda ma'lum bir kodni bajaradigan element.

Swift•

Button ko'rinishi

// Button ikkita argument qabul qiladi: action closure va label closure
Button(action: {
  // Foydalanuvchi tugmani bosganda ushbu kod ishlaydi
  print("Tugma bosildi!")
}) {
  // Bu tugmaning ko'rinishi
  Text("Boshlash")
}

Button ikkita narsani qabul qiladi: action (bosilganda nima sodir bo'lishi) va label (tugma qanday ko'rinishi). Action — bu kod bloki (closure) bo'lib, foydalanuvchi tugmani bosganda ishlaydi. Label esa faqatgina matn emas, balki har qanday ko'rinish bo'lishi mumkin. Keyinchalik siz rasm ikonkalari, matn va belgi kombinatsiyalarini va yana ko'plab variantlarni ko'rasiz.

📝 Qisqaroq Button sintaksisi:
Ko'pincha Button'ning qisqaroq yozilishini ko'rasiz: Button("Get Started") { print("tapped") }. Bu bir xil natijani beruvchi shorthand yozuv usuli — tugma ko'rinishi berilgan matndan olinadi, orqadagi closure esa action hisoblanadi. Ikkala shakl ham mutlaqo bir xil ishlaydi.

Tezkor ma'lumotnoma

Sintaksis	U nima vazifa bajaradi
`Text("Salom")`	Matnni ekranda standart tizim shriftida ko'rsatadi
`Image(systemName: "star.fill")`	SF Symbols kutubxonasidan belgini nomi bo'yicha ko'rsatadi
`Image("rasm-nomi")`	Assets katalogidagi rasmni ko'rsatadi
`Button(action: { }) { }`	Action va Label ko'rinishiga ega bosiladigan tugma yaratadi
`Button("Matn") { }`	Matnli ko'rinish va trailing action closure yordamida qisqa tugma yaratadi
`var body: some View`	Har bir SwiftUI Viewdagi majburiy xususiyat — nimani ko'rsatishni qaytaradi

Sun'iy intellektdan chuqurroq o'rganish uchun foydalanish

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

"Men SwiftUI-ni o'rganyapman va 'some View' qaytaruvchi turi haqida bilib oldim. Iltimos, Swift-da 'some' kalit so'zi nimani anglatishini va SwiftUI nima uchun undan body xususiyatida foydalanishini tushuntirib bera olasizmi? Menga kod ko'rsatishdan oldin oddiy tilda tushuntirish bering."
"SwiftUI-da Button obyekti action closure va label closure-ni qabul qiladi. Iltimos, Swift-da closure (yopiq kod bloki) nima ekanligini hayotiy misol orqali tushuntirib bering va keyin Button-dagi ikkita closure ushbu tushuntirish bilan qanday bog'lanishini ko'rsatib bering."

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

"Text, Image (systemName bilan) va Button ishlatilgan SwiftUI ContentView yozib bering. Har bir qatorga u nima ish qilishini va nima uchun yozilganini tushuntiruvchi izoh yozing. Izohlarni SwiftUI-ni birinchi marta ko'rayotgan odam tushunadigan qilib yozing. Men uni Xcode-ga joylab, o'qib chiqmoqchiman."

🎯 Topshiriq: oddiy profil preview yaratish

ContentViewingizda ekranga uchta elementni joylashtiring: Image(systemName: "person.circle.fill") yordamida shaxs belgisi, ismingiz yozilgan Text ko'rinishi va "Follow" yozuvli Button tugmasi. Ular hozircha bir-birining ustiga joylashadi — bu normal holat, joylashuv (layout) mavzusi keyingi darslarda o'tiladi. Maqsad — canvas preview'da ushbu uchta elementning hammasi bir vaqtda ko'rinib turishi.

Swift•

Topshiriq yechimi

import SwiftUI

struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "person.circle.fill")
Text("ShoxruxC")
Button("Kuzatish") {
print("Kuzatish tugmasi bosildi")
}
}
}
}

💡 Maslahat:
SwiftUI to'g'ridan-to'g'ri body ichida faqat bitta ko'rinish bo'lishiga ruxsat beradi. Agar konteyner ishlatmasdan uchta ko'rinishni joylashtirmoqchi bo'lsangiz, xatolikka duch kelasiz. Ularni VStack { } ichiga o'rab ko'ring — buni keyingi darslarda batafsil o'rganamiz.