Published on

SwiftUI-da Slider

Authors

Bu videoda Slider komponentini o'rganamiz. Slider — foydalanuvchi bir qiymatdan ikkinchisiga siljitishi mumkin bo'lgan komponent. U diapazon, qadam va ranglar bilan sozlanadi.

Yangi fayl yaratish

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

1. Oddiy Slider

struct SliderBootcamp: View {

    @State var sliderValue: Double = 10

    var body: some View {
        VStack(spacing: 20) {
            Text("Reyting: \(sliderValue)")

            Slider(value: $sliderValue)
                .accentColor(.red)
        }
        .padding()
    }
}

Standart holatda slider 0 dan 1.0 gacha ishlaydi. Rangni .accentColor() bilan o'zgartirish mumkin.

2. Diapazon belgilash — in:

Slider(value: $sliderValue, in: 0...100)

Endi slider 0 dan 100 gacha ishlaydi. Boshlang'ich qiymat sliderValue = 10 bo'lgani uchun chap tomonda joylashadi.

3. Qadam belgilash — step:

Slider har bir harakat uchun qancha o'zgarishini step bilan belgilash mumkin. Masalan, faqat butun sonlar (1, 2, 3, 4, 5):

Slider(value: $sliderValue, in: 1...5, step: 1.0)

Yoki yarim sonlar (1.0, 1.5, 2.0 ...):

Slider(value: $sliderValue, in: 1...5, step: 0.5)

4. Sonni formatlash

Ko'p kasr o'rinlaridan qochish uchun String(format:) ishlatiladi:

// 2 kasr o'rin: 3.50
Text(String(format: "%.2f", sliderValue))

// 1 kasr o'rin: 3.5
Text(String(format: "%.1f", sliderValue))

// 0 kasr o'rin: 3
Text(String(format: "%.0f", sliderValue))
FormatKo'rinishi
%.0f3
%.1f3.5
%.2f3.50

5. To'liq sozlangan Slider

minimumValueLabel, maximumValueLabel va onEditingChanged parametrlari bilan:

struct SliderBootcamp: View {

    @State var sliderValue: Double = 3
    @State var color: Color = .red

    var body: some View {
        VStack(spacing: 20) {
            Text(String(format: "%.0f", sliderValue))
                .foregroundColor(color)
                .font(.headline)

            Slider(
                value: $sliderValue,
                in: 1...5,
                step: 1.0,
                onEditingChanged: { _ in
                    // Slider o'zgartirilganda chaqiriladi
                    color = .green
                },
                minimumValueLabel: Text("1")
                    .font(.largeTitle)
                    .foregroundColor(.orange),
                maximumValueLabel: Text("5")
                    .font(.largeTitle)
                    .foregroundColor(.orange),
                label: { Text("Reyting") }
            )
            .accentColor(.red)
        }
        .padding(50)
    }
}
  • minimumValueLabel — sliderning chap tomonida ko'rinadigan element
  • maximumValueLabel — sliderning o'ng tomonida ko'rinadigan element
  • onEditingChanged — foydalanuvchi slider bilan ishlashni boshlaganda yoki tugatganda chaqiriladi
  • label — ba'zi stillarda ko'rinadigan sarlavha (compact rejimda ko'rinmasligi mumkin)

To'liq kod

struct SliderBootcamp: View {

    @State var sliderValue: Double = 3
    @State var color: Color = .red

    var body: some View {
        VStack(spacing: 30) {
            Text("Reyting: \(String(format: "%.0f", sliderValue))")
                .font(.title)
                .foregroundColor(color)

            // Oddiy slider
            Slider(value: $sliderValue, in: 0...100)
                .accentColor(.red)

            // Qadam va labellar bilan
            Slider(
                value: $sliderValue,
                in: 1...5,
                step: 1.0,
                onEditingChanged: { _ in
                    color = .green
                },
                minimumValueLabel: Text("1")
                    .font(.largeTitle)
                    .foregroundColor(.orange),
                maximumValueLabel: Text("5")
                    .font(.largeTitle)
                    .foregroundColor(.orange),
                label: { Text("Reyting") }
            )
            .accentColor(.red)
        }
        .padding(50)
    }
}

Xulosa

Bu videoda o'rgandik:

  • Slider(value:) — oddiy slider, 0 dan 1.0 gacha
  • in: min...max — diapazonni belgilash
  • step: — har bir harakat uchun o'zgarish miqdori
  • %.0f / %.1f / %.2f — kasr sonlarni chiroyli formatlash
  • minimumValueLabel / maximumValueLabel — chap va o'ng tomondagi belgilar
  • onEditingChanged — slider o'zgartirilganda bajariladigan amal
  • .accentColor() — slider rangini o'zgartirish

Slider baholash (1-5 yulduz), ovoz balandligi, yorqinlik va shunga o'xshash sozlamalarda juda ko'p ishlatiladi.

Rahmat tomosha qilganingiz uchun! Keyingi videoda ko'rishamiz!

Buy mea coffee