Published on: Thursday, January 29, 2026

frame(), padding() va offset()

Authors

Name
ShoxruxC
@iOSdasturchi

SwiftUI view'lari odatda tarkibiga sig'adigan o'lchamda bo'ladi. Text — matni kengligidagina. Button — yorlig'ini o'rab oladi. Bu ko'pincha aynan kerakli nарса — lekin har doim emas. View qanchalik katta bo'lishi, qaerda joylashishi yoki atrofida qancha joy bo'lishini aniq boshqarish kerak bo'lganda frame(), padding() va offset() yordamga keladi.

frame() — view joylashadigan tashqi qutini belgilash. padding() — view atrofiga yostiqcha qo'shish. offset() — view-ni odatdagi joyidan siljitish, lekin atrofdagi view'larni buzmagan holda.

Bu uchta modifikator SwiftUI-dagi rasmiy o'lchamlash va joylashtirish ishlarining katta qismini qoplaydi. Ularni deyarli har bir view-da ishlatishingiz kerak bo'ladi.

Swift•

ContentView.swift

import SwiftUI

struct ContentView: View {
var body: some View {
VStack(spacing: 20) {

          // Qat'iy frame: aniq 200 keng, 60 baland
          Text("Qat'iy Frame")
              .frame(width: 200, height: 60)
              .background(.blue.opacity(0.2))

          // Padding: tarkib va atrofidagi narsa orasiga joy qo'shadi
          Text("Padding bilan")
              .padding(16)
              .background(.green.opacity(0.2))

          // Offset: vizual siljitadi, lekin qo'shni view-lar harakatlanmaydi
          Text("Siljigan matn")
              .offset(x: 30, y: 10)
              .background(.orange.opacity(0.2))
      }
  }

}

frame(), padding() va offset() variantlari

.frame(maxWidth: .infinity) — to'liq kenglikka cho'zish

// Konteynerning to'liq kengligini egallaydi
Text("To'liq Kenglikdagi Tugma")
    .frame(maxWidth: .infinity)
    .padding()
    .background(.blue)
    .foregroundStyle(.white)
    .cornerRadius(12)

maxWidth: .infinity SwiftUI-ga bu view mavjud bo'lgan gorizontal joyni to'liq egallashini aytadi. Bu tugmalar, kartalar va ajralib turadigan bo'limlar uchun keng qo'llaniladigan pattern.

Swift•

FullWidthButton.swift

import SwiftUI

struct FullWidthButton: View {
var body: some View {
Text("To'liq Kenglikdagi Tugma")
.frame(maxWidth: .infinity)
.padding()
.background(.blue)
.foregroundStyle(.white)
.cornerRadius(12)
.padding(.horizontal)
}
}

.frame(minWidth:maxWidth:) — moslashuvchan chegaralar

// Kamida 100 keng, ko'pi bilan 300 keng, mavjud joyda kengayadi
Text("Moslashuvchan matn")
    .frame(minWidth: 100, maxWidth: 300)
    .background(.yellow.opacity(0.4))

Moslashuvchan frame-lar view-ni belgilangan chegaralar ichida o'sishiga yoki qisqarishiga imkon beradi. View mavjud joy qadar keng bo'lishga harakat qiladi, lekin hech qachon 300 pt dan katta, 100 pt dan kichik bo'lmaydi.

.frame(alignment:) — frame ichida hizalash

// Tarkib frame-ning bosh (chap) chetiga hizalanadi
Text("Chapga hizalangan")
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding()

View-ning frame-i tarkibidan katta bo'lganda, tarkib odatda markazlashadi. alignment: parametri uni chapga, o'ngga yoki boshqa joyga surish imkonini beradi. maxWidth: .infinity bilan birgalikda bu barcha text elementlarini chapga hizalashning standart usuli.

Swift•

AlignedTextView.swift

import SwiftUI

struct AlignedTextView: View {
var body: some View {
VStack(spacing: 8) {
Text("Chapga hizalangan")
.frame(maxWidth: .infinity, alignment: .leading)
.background(.blue.opacity(0.1))
Text("Markazlashgan (standart)")
.frame(maxWidth: .infinity)
.background(.green.opacity(0.1))
Text("O'ngga hizalangan")
.frame(maxWidth: .infinity, alignment: .trailing)
.background(.orange.opacity(0.1))
}
.padding()
}
}

.padding(.top, 24) — ma'lum tomonga padding

VStack(alignment: .leading) {
    // Sarlavha ustidan faqat yuqori padding qo'shadi
    Text("Bo'lim Sarlavhasi")
        .font(.headline)
        .padding(.top, 24)
    Text("Qo'shimcha yuqori joy yo'q tarkib")
}

Barcha tomonlarga emas, faqat ma'lum tomonga padding qo'shish uchun .padding(.top, n), .padding(.horizontal, n) va hokazolardan foydalaning. Bu bo'limlar orasidagi masofa boshqarilganda va vertikal ritm saqlanganida foydali.

Offset vs position: offset() view-ni vizual siljitadi, lekin joylashuv tizimi uni qaerda deb hisoblashini o'zgartirmaydi. Boshqa view-lar joy berish uchun siljimaydi. Agar view joylashuvda haqiqatdan harakatlanishi kerak bo'lsa, padding() yoki frame() ishlating.

Tezkor ma'lumotnoma

Modifikator	Vazifasi
`.frame(width:height:)`	Qat'iy o'lcham. View tarkibi bu quti ichiga, odatda markazga joylashadi
`.padding(16)`	View tarkibi va undan tashqaridagi har narsa orasiga barcha tomondan 16 pt joy qo'shadi
`.offset(x:y:)`	View-ni x/y nuqtasiga vizual siljitadi. Boshqa view-lar harakatlanmaydi — ular bu view asl joyida deb hisoblashda davom etadi
`.background()`	Frame-ni ko'rinadigan qilish uchun ishlatiladi, shunda har bir modifikator qaysi maydonni qamrab olishini aniq ko'rish mumkin
`.frame(maxWidth: .infinity)`	To'liq kenglikka cho'zadi
`.frame(minWidth:maxWidth:)`	Moslashuvchan chegaralar
`.frame(alignment:)`	Tarkibni frame ichida hizalashni nazorat qiladi
`.padding(.top, 24)`	Faqat yuqori tomonga padding

Topshiriq: karta View yaratish

Karta view yarating: sarlavha va taglavhani o'z ichiga olgan VStack, ikkalasi ham .frame(maxWidth: .infinity, alignment: .leading) yordamida chapga hizalangan. VStack barcha tomondan 16 pt padding, oq fon, 12 pt burchak radiusi va engil soyaga ega bo'lsin. Kartaning tagida to'liq kenglikdagi tugma qo'shing. Canvas-da tekshiring — karta real ilovadagidek ko'rinishi kerak.