Published on: Thursday, February 19, 2026

Toggle, Slider va Stepper

Authors

Name
ShoxruxC
@iOSdasturchi

Sozlamalar ekranlari uchta boshqaruv turini keng qo'llaydi: yoqish/o'chirish uchun Toggle, uzluksiz qiymat tanlash uchun Slider va diskret qadamlar uchun Stepper. Ularning barchasi @State o'zgaruvchisiga bog'lanadi va foydalanuvchi o'zgartirganda avtomatik yangilanadi.

Toggle — bu ikkita holat o'rtasida almashadigan kalit: yoniq/o'chiq, ruxsat berilgan/berilmagan, ko'rinadigan/ko'rinmaydigan. Slider — sichqoncha yoki barmoq bilan siljitiladigan boshqaruv, odatda Double qiymat uchun. Stepper — + va - tugmalar bilan diskret qadamlarda o'zgaradigan son boshqaruvi.

Swift•

ContentView.swift

import SwiftUI

struct ContentView: View {
@State private var bildirishnomalarYoqilgan = true
@State private var yoruqlik: Double = 0.72
@State private var shriftOlchami: Int = 16

  var body: some View {
      VStack(alignment: .leading, spacing: 20) {
          // Toggle — Bool @State o'zgaruvchisiga bog'lanadi
          Toggle("Bildirishnomalarni yoqish", isOn: $bildirishnomalarYoqilgan)

          Divider()

          // Slider — Double diapazonida uzluksiz qiymat
          Text("Yoruqlik: \(Int(yoruqlik * 100))%")
          Slider(value: $yoruqlik, in: 0...1)

          Divider()

          // Stepper — diskret qadamlar bilan son boshqaruvi
          Text("Shrift o'lchami: \(shriftOlchami)pt")
          Stepper("Shrift o'lchami", value: $shriftOlchami, in: 10...32, step: 2)
      }
      .padding()
  }

}

Boshqaruv variantlari

Slider belgilar bilan

Slider(value: $yoruqlik, in: 0...1) {
    Text("Yoruqlik")
} minimumValueLabel: {
    Image(systemName: "sun.min")
} maximumValueLabel: {
    Image(systemName: "sun.max")
}

Minimum va maksimum belgilar slider chetlarida ko'rinadi. Bu foydalanuvchiga qiymat diapazonini vizual ko'rsatadi.

Slider onEditingChanged bilan

Slider(value: $hajmi, in: 8...72) { isEditing in
    // isEditing = true: foydalanuvchi siljitmoqda
    // isEditing = false: qo'l ko'tarildi — o'zgarish tugadi
    if !isEditing {
        yangiHajmniQolla(hajmi)
    }
}

Stepper maxsus label bilan

Stepper {
    // Istalgan view label sifatida
    Label("Mehmonlar: \(mehmonlar)", systemImage: "person.2")
} onIncrement: {
    mehmonlar += 1
} onDecrement: {
    if mehmonlar > 1 { mehmonlar -= 1 }
}

Maxsus imkoniyatlar eslatmasi: Toggle, Slider va Stepper uchun har doim mazmunli label bering. VoiceOver bu labellarni ko'zi zaif foydalanuvchilarga ovoz chiqarib o'qiydi. Hech narsa aytmaydigan toggle bu foydalanuvchilar uchun foydalanib bo'lmaydi. Label UI da ko'rinishi shart emas — dizayningiz talab qilsa uni .labelsHidden() bilan yashirishingiz mumkin — lekin har doim real satr uzating.

Qo'shimcha variantlar

Slider with step

step: qo'shish slayderning diskret qiymatlarga sakrab o'tishini ta'minlaydi. Ovoz balandligi kabi 0, 5, 10, 15 orasidagi qiymatlar xohlanganda foydali. Qiymat har doim aniq songa tushgani uchun butun son ko'rinishi bilan yaxshi ishlaydi.

// step: 5 means the value jumps 0, 5, 10, 15... when dragged
Slider(value: $volume, in: 0...100, step: 5)

Stepper with custom step

Standart qadam 1. Foydalanuvchi ko'p miqdordagi narsani tanlaganda foydali — qadoq miqdori, sahifa soni yoki daqiqalar oralig'i.

// step: 5 means each tap adds or subtracts 5
Stepper("Quantity", value: $quantity, in: 0...100, step: 5)

Toggle with custom style

.button toggle uslumi — aktiv bo'lganda yoritilgan hap shaklidagi tugma ko'rinishi beradi. Matn formatlash panellari yoki bir qator yoqish/o'chirish variantlari ro'yxatdan ko'ra mantiqli bo'lgan har qanday UI uchun qulay.

// Button style — looks like a button that activates/deactivates
Toggle("Bold", isOn: $isBold)
    .toggleStyle(.button)

Slider with labels

Bu uzunroq boshlang'ich parametr slayderga har ikkala uchida kontekst belgilari beradi. Birinchi trailing closure kirish imkoniyati labeli (viewdan yashiringan). Min va max belgilari foydalanuvchiga yaqin atrofda qo'shimcha tavsif kerak bo'lmay masshtabni vizual tushunishga yordam beradi.

// minimumValueLabel and maximumValueLabel show on the slider ends
Slider(value: $rating, in: 1...5, step: 1) {
    Text("Rating")
} minimumValueLabel: {
    Text("1")
} maximumValueLabel: {
    Text("5")
}

Tezkor ma'lumotnoma

Boshqaruv	@State turi	Asosiy parametr
`Toggle("sarlavha", isOn: $bool)`	`Bool`	`isOn:`
`Slider(value: $double, in: 0...1)`	`Double`	`in:` diapazon
`Stepper("sarlavha", value: $int, in: 1...10, step: 1)`	`Int` / `Double`	`in:` va `step:`

Topshiriq: sozlamalar paneli

Uchta sozlama bilan VStack yarating: "Tungi rejim" Toggle (Bool), "Ovoz balandligi" Slider (0...1), "Matn o'lchami" Stepper (12...24, step: 2). Har bir qiymatni Text bilan ko'rsating. Simulyatorda ishlating.