Published on: Sunday, February 22, 2026

Form va Section

Authors

Name
ShoxruxC
@iOSdasturchi

iOS Sozlamalar ilovasini oching — bu Form va Section kombinatsiyasining mukammal namunasi. TextField, Toggle, Picker va DatePicker-lar tartibli guruhlar ichiga joylashtirilgan, har birida sarlavha va ba'zan pastki sarlavha bor.

Form — List-ga o'xshash, lekin ma'lumot kiritish boshqaruvlari uchun optimallashgan konteyner. Toggle, Picker, TextField kabi boshqaruvlar Form ichida avtomatik ravishda iOS Sozlamalar uslumida ko'rinadi. Section tegishli boshqaruvlarni sarlavha ostida guruhlaydi.

Swift•

ContentView.swift

import SwiftUI

enum Mavzu: String, CaseIterable, Identifiable {
case tizim = "Tizim"
case yoruglik = "Yorug'"
case tungi = "Tungi"
var id: String { rawValue }
}

struct ContentView: View {
@State private var korinishNomi = ""
@State private var bildirishnomalar = true
@State private var tovush = true
@State private var mavzu: Mavzu = .tizim

  var body: some View {
      NavigationStack {
          // Form — input boshqaruvlari uchun optimallashgan konteyner
          Form {
              // Section: tegishli boshqaruvlarni sarlavha ostida guruhlash
              Section("Profil") {
                  // TextField Form ichida avtomatik to'g'ri uslum oladi
                  TextField("Ko'rsatiladigan ism", text: $korinishNomi)
              }

              Section("Bildirishnomalar") {
                  Toggle("Push bildirishnomalar", isOn: $bildirishnomalar)
                  Toggle("Tovush", isOn: $tovush)
              } footer: {
                  // Footer — bo'lim ostida kichik izoh
                  Text("Bildirishnomalar qulf ekranida ko'rinadi.")
              }

              Section("Ko'rinish") {
                  // Picker Form ichida avtomatik menu/inline uslum oladi
                  Picker("Mavzu", selection: $mavzu) {
                      ForEach(Mavzu.allCases) { m in
                          Text(m.rawValue).tag(m)
                      }
                  }
              } footer: {
                  Text("Tizim qurilmaning ko'rinish sozlamasiga amal qiladi.")
              }
          }
          .navigationTitle("Sozlamalar")
      }
  }

}

Form uslublari va patternlari

.formStyle(.grouped)

Form {
    Section("Hisob") { /* boshqaruvlar */ }
    Section("Maxfiylik") { /* boshqaruvlar */ }
}
.formStyle(.grouped)
// Bo'limlar yumaloq karta ko'rinishida — iOS sozlamalar uslumi
// iOS 16+ da default

Form ichida navigatsiya qatori

Form {
    Section("Hisob") {
        // NavigationLink Form ichida o'q bilan qator ko'rinishi beradi
        NavigationLink("Shaxsiy ma'lumotlar") {
            ShaxsiyMaʼlumotlarView()
        }
        NavigationLink("Parolni o'zgartirish") {
            ParolniOzgartirishView()
        }
    }
}

Qo'shimcha variantlar

Section with View header

Header closure har qanday viewni qabul qiladi — faqat matr emas. Label ishlatish bo'lim sarlavhasi yoniga ikonka qo'shadi, bu foydalanuvchiga uzun sozlamalar ekranini tezroq ko'rib chiqishga yordam beradi.

// Use a view builder for a custom styled header
Section {
    Toggle("Location Access", isOn: $locationEnabled)
} header: {
    Label("Privacy", systemImage: "lock.shield")
}

Button inside Form

Form ichidagi tugmalar ro'yxat qatori sifatida ko'rinadi. role: .destructive ishlatish matnni avtomatik qizil rangga bo'yaydi — qo'shimcha stil kerak bo'lmay foydalanuvchiga xavfni bildiradi. Bu Apple HIG ning buzuvchi amallar uchun tavsiyasiga mos keladi.

Section {
    // A destructive button at the bottom of the form
    Button("Delete Account", role: .destructive) {
        print("Delete tapped")
    }
}

.formStyle()

Standart form uslumi platformalar orasida avtomatik moslashadi. iPhone-da guruhlangan ro'yxat uslumi ko'rinadi. iPad va Mac Catalyst-da .columns uslumi labellar va boshqaruvlarni yonma-yon ko'rsatadi. Platforma standartlarini almashtirmasangiz, buni maxsus ko'rsatish shart emas.

// Grouped (default on iPhone) — rounded rectangle sections
Form { }
    .formStyle(.grouped)

// Columns (default on iPad/Mac) — two-column layout
Form { }
    .formStyle(.columns)

Tezkor ma'lumotnoma

Element	Form ichida ko'rinishi
`TextField`	Separator bilan tekis qator
`Toggle`	Chap sarlavha + o'ng switch
`Picker`	Chap sarlavha + o'ng tanlangan qiymat + o'q
`DatePicker`	Compact uslumida qator
`Section("sarlavha")`	Kulrang sarlavha + yumaloq karta ichidagi boshqaruvlar
`Section { } footer: { }`	Guruh osti kichik izoh matni

Topshiriq: to'liq sozlamalar ekrani

Uch bo'limli sozlamalar yarating: "Hisob" (ism TextField, email TextField), "Bildirishnomalar" (ikkita Toggle, footer bilan), "Ko'rinish" (Mavzu Picker, Shrift o'lchami Stepper 12-24). NavigationStack va navigationTitle("Sozlamalar") qo'shing. Simulyatorda sinab ko'ring.