Published on

SwiftUI-da Stepper

Authors

Hammaga xush kelibsiz! Mening ismim Nick, bu β€” Swiftful Thinking kanali.

Oxirgi uch videoda turli Picker-lar ko'rdik. Bu videoda esa yangi mavzu β€” Stepper. Foydalanuvchi qiymatni bittaga oshirishi yoki kamaytirishi kerak bo'lganda Stepper juda qulay. Standart rejimda +/- bir birlik o'zgartiradi, lekin biz uni xohlagan miqdorga sozlashimiz ham mumkin.

Yangi fayl yaratish

Navigatorda o'ng tugma bosib yangi SwiftUI fayli yarating. Uni StepperBootcamp deb nomlang va Create tugmasini bosing. Canvas-da Resume bosing.

1. Standart Stepper

struct StepperBootcamp: View {

    @State var stepperValue: Int = 10

    var body: some View {
        Stepper(
            "Qiymat: \(stepperValue)",
            value: $stepperValue
        )
        .padding(50)
    }
}

+ bosilganda qiymat 1 ta oshadi, - bosilganda 1 ta kamayadi. Bu Stepper-ning eng oddiy va tez ishlatish usuli.

2. Maxsus onIncrement va onDecrement

Standart birlik o'rniga o'zimiz belgilagan miqdorga o'zgartirish uchun onIncrement va onDecrement parametrlaridan foydalanamiz:

struct StepperBootcamp: View {

    @State var stepperValue: Int = 10
    @State var widthIncrement: CGFloat = 0

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

            // Standart stepper β€” bittadan o'zgaradi
            Stepper("Qiymat: \(stepperValue)", value: $stepperValue)

            // Shakl β€” kengligi o'zgaradi
            RoundedRectangle(cornerRadius: 25)
                .frame(width: 100 + widthIncrement, height: 100)

            // Maxsus stepper β€” o'nta o'zgaradi
            Stepper("Kenglik steperi") {
                // + bosilganda
                incrementWidth(by: 10)
            } onDecrement: {
                // - bosilganda
                incrementWidth(by: -10)
            }
        }
        .padding(50)
    }

    func incrementWidth(by amount: CGFloat) {
        withAnimation(.easeInOut) {
            widthIncrement += amount
        }
    }
}

onIncrement va onDecrement closure-larida xohlagan kod yozish mumkin β€” animatsiya, ma'lumotlar bazasiga yozish, boshqa o'zgaruvchilarni yangilash va hokazo.

Standart va maxsus Stepper β€” taqqoslash

StandartMaxsus (onIncrement)
O'zgarish miqdoriFaqat 1 taXohlagan miqdor
AnimatsiyaYo'qwithAnimation qo'shish mumkin
Qo'shimcha mantiqYo'qIstalgan kod yozish mumkin
Yozish qulayligiJuda osonBiroz ko'proq kod

To'liq kod

struct StepperBootcamp: View {

    @State var stepperValue: Int = 10
    @State var widthIncrement: CGFloat = 0

    var body: some View {
        VStack(spacing: 30) {
            // Standart stepper
            Stepper("Qiymat: \(stepperValue)", value: $stepperValue)

            // O'zgaruvchi kenglikdagi shakl
            RoundedRectangle(cornerRadius: 25)
                .frame(width: 100 + widthIncrement, height: 100)

            // Maxsus stepper β€” animatsiya bilan
            Stepper("Kenglik: \(Int(widthIncrement))") {
                incrementWidth(by: 10)
            } onDecrement: {
                incrementWidth(by: -10)
            }
        }
        .padding(50)
    }

    func incrementWidth(by amount: CGFloat) {
        withAnimation(.easeInOut) {
            widthIncrement += amount
        }
    }
}

Xulosa

Bu videoda o'rgandik:

  • Stepper β€” qiymatni +/- tugmalar bilan oshirish yoki kamaytirish komponenti
  • value: $binding β€” standart rejimda bittadan o'zgartiradi
  • onIncrement / onDecrement β€” maxsus funksiyalar bilan istalgan miqdorga o'zgartirish
  • withAnimation β€” stepper o'zgarishiga animatsiya qo'shish
  • Funksiyani alohida chiqarish (incrementWidth) kodni tartibli saqlaydi

Stepper soni, miqdor, hajm kabi qiymatlarni o'zgartirishda qo'l keladi.

Rahmat tomosha qilganingiz uchun! Men β€” Nick, bu Swiftful Thinking. Keyingi videoda ko'rishamiz!

Buy mea coffee