Published on: Wednesday, January 28, 2026

Spacer va Divider

Authors

Name
ShoxruxC
@iOSdasturchi

Odatda SwiftUI stack'lari view'larni tarkibiga sig'adigan eng kichik joyga joylaydi. Bu oddiy layoutlar uchun yaxshi, lekin real ilovalardagi ko'pchilik vaziyatlarda nafas olish joyi kerak bo'ladi — sarlavhani yuqoriga, tugmani pastga surish yoki bo'limlar orasiga ajratuvchi chiziq qo'yish. Aynan mana shu hollarda Spacer va Divider kerak bo'ladi.

Spacer — joylashtirilgan yo'nalishda barcha mavjud bo'sh joyni egallaydiган ko'rinmas view. Uni o'ylab ko'ring: ikki view orasiga qo'ysangiz, ular iloji boricha uzoqqa itariladi — xuddi yay (spring) kabi. Divider esa bo'limlarni vizual ajratadigan yupqa gorizontal (yoki vertikal) chiziq — iOS-ning Sozlamalar (Settings) menyusida ko'rganingiz kabi.

Spacer ham, Divider ham o'z-o'zicha hech qanday ko'rinadigan kontent ko'rsatmaydi. Spacer — sof layout vositasi; Divider — bitta chiziq. Ikkalasi birgalikda har qanday SwiftUI ilovasida eng ko'p ishlatiladigan ikkita layout vositasini tashkil etadi.

Swift•

ContentView.swift

import SwiftUI

struct ContentView: View {
var body: some View {
VStack {
// Sarlavha yuqorida qoladi
Text("Mening Ilovam")
.font(.largeTitle)

          // Spacer quyidagi hamma narsani pastga itaradi
          Spacer()

          // Divider gorizontal ajratuvchi chiziq chizadi
          Divider()

          // Tugma pastda joylashadi
          Button("Boshlash") { }
              .buttonStyle(.borderedProminent)
      }
      .padding()
  }

}

Spacer va Divider variantlari

Bir nechta Spacer — joyni teng taqsimlash

VStack {
    // Har bir Spacer bo'sh joyning teng ulushini oladi
    Spacer()
    Text("Yuqori uchdan bir qism")
    Spacer()
    Text("O'rta uchdan bir qism")
    Spacer()
    Text("Pastki uchdan bir qism")
    Spacer()
}

To'rtta Spacer uchta Text atrofida barcha mavjud bo'sh joyni teng taqsimlaydi — view'lar yuqoridan pastgacha teng masofada joylashadi. Onboarding ekranlar yoki splash layoutlar uchun juda qulay.

Swift•

EvenSpacingView.swift

import SwiftUI

struct EvenSpacingView: View {
var body: some View {
VStack {
Spacer()
Text("Yuqori uchdan bir qism")
.font(.headline)
Spacer()
Text("O'rta uchdan bir qism")
.font(.headline)
Spacer()
Text("Pastki uchdan bir qism")
.font(.headline)
Spacer()
}
}
}

minLength — Spacer uchun minimal o'lcham belgilash

VStack {
    Text("Bo'lim Sarlavhasi").font(.headline)
    // Bu Spacer har doim kamida 32 pt bo'ladi
    Spacer(minLength: 32)
    Text("Quyidagi tarkib")
}

Odatda Spacer konteyner juda kichik bo'lsa nolgacha qisqarishi mumkin. minLength: buni oldini oladi. Kichikroq qurilmalarda ham hech qachon yo'qolmaydigan nafas olish joyi kerak bo'lganda foydali.

HStack ichidagi Spacer — view'larni ikki tomonga itarish

HStack {
    Text("Chap")
    // HStack ichidagi Spacer gorizontal kengayadi
    Spacer()
    Text("O'ng")
}

HStack ichida Spacer vertikal emas, gorizontal yo'nalishda itaradi. "Chap" bosh (leading) chegaraga, "O'ng" esa oxirgi (trailing) chegaraga yopishadi. Bu navigatsiya paneli (navigation bar) ko'rinishidagi satrlar uchun standart patterndir.

Swift•

HStackSpacerView.swift

import SwiftUI

struct HStackSpacerView: View {
var body: some View {
HStack {
Text("Chap")
Spacer()
Text("O'ng")
}
.padding()
}
}

HStack ichidagi Divider — vertikal ajratgich chizish

HStack {
    Text("A variant")
    // HStack ichidagi Divider vertikal chiziq chizadi
    Divider()
    Text("B variant")
}
.fixedSize(horizontal: false, vertical: true)

HStack ichida Divider vertikal chiziq chizadi. .fixedSize modifikatori HStack-ga belgilangan balandlik beradi, shunda Divider to'ldirishga yer topadi. Usiz Divider ko'rinmasligi mumkin.

Keng tarqalgan xato: ZStack ichiga Spacer qo'yish narsalarni ajratmaydi. Spacer faqat VStack va HStack ichida kutilgandek ishlaydi.

Tezkor ma'lumotnoma

View / Modifikator	Vazifasi
`Spacer()`	Stack yo'nalishida barcha bo'sh joyni egallaydi
`Spacer(minLength: n)`	Xuddi shunday, lekin hech qachon n pt dan kichik bo'lmaydi
`Divider()`	Gorizontal chiziq chizadi (HStack ichida vertikal)
VStack ichidagi Spacer	Vertikal kengayadi, qo'shni view'larni chegaralarga itaradi
HStack ichidagi Spacer	Gorizontal kengayadi, qo'shni view'larni yonlarga itaradi

Topshiriq: profil satrini yaratish

Sozlamalar ekranidagi profil satriga o'xshash view yarating. Chapdan o'ngga: aylana (Circle().fill(.blue).frame(width: 44, height: 44)), keyin kichikroq shriftda ism va taglavhasi bo'lgan VStack, keyin Spacer, keyin ko'k rangdagi "Tahrirlash" matni. Butun satr barcha tomonlardan padding bilan o'ralgan bo'lsin. Canvas-da tekshiring — u odatdagi iOS sozlamalar katakchasiga o'xshash bo'lishi kerak.