Published on

SwiftUI-da Picker va uning stillari

Authors

Hammaga xush kelibsiz! Mening ismim Nick, bu — Swiftful Thinking kanali.

Bu videoda Picker komponentini o'rganamiz. Foydalanuvchi bir nechta variantdan birini tanlashi kerak bo'lgan har qanday holatda Picker juda qulay. Katta ma'lumot to'plamlari uchun ham, kichik (2-3 variant) uchun ham mos stillar mavjud.

Yangi fayl yaratish

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

1. Wheel Picker — aylanuvchan g'ildirak

Bu Picker-ning standart ko'rinishi. Katta ma'lumot to'plamlari uchun qulay.

Oddiy Picker

struct PickerBootcamp: View {

    @State var selection: String = "1"

    var body: some View {
        VStack {
            HStack {
                Text("Yosh:")
                Text(selection)
            }

            Picker(
                selection: $selection,
                label: Text("Picker"),
                content: {
                    Text("1").tag("1")
                    Text("2").tag("2")
                    Text("3").tag("3")
                    Text("4").tag("4")
                    Text("5").tag("5")
                }
            )
            .pickerStyle(WheelPickerStyle())
        }
    }
}

Eslatma: Text — ekranda ko'rinadigan narsa, .tag() — tanlaganda selection-ga yoziladigan qiymat. Ular odatda bir xil bo'ladi.

ForEach bilan katta diapason

100 tagacha yozishning hojati yo'q — ForEach ishlatamiz:

struct PickerBootcamp: View {

    @State var selection: String = "18"

    var body: some View {
        VStack {
            HStack {
                Text("Yosh:")
                Text(selection)
            }

            Picker(
                selection: $selection,
                label: Text("Yosh"),
                content: {
                    ForEach(18..<100) { number in
                        Text("\(number)").tag("\(number)")
                    }
                }
            )
            .pickerStyle(WheelPickerStyle())
        }
    }
}

Endi Picker 18 dan 99 gacha barcha sonlarni ko'rsatadi.

Rangini biroz sozlash

Picker(/* ... */, content: {
    ForEach(18..<100) { number in
        Text("\(number)")
            .font(.headline)
            .foregroundColor(.red)
            .tag("\(number)")
    }
})
.background(Color.gray.opacity(0.3))
.pickerStyle(WheelPickerStyle())

Picker unchalik katta sozlash imkonini bermaydi. Lekin matn rangi va fon rangini o'zgartirish mumkin.

2. Menu Picker — ochiladigan menyu

Kichik ma'lumot to'plamlari (2-5 variant) uchun juda chiroyli ko'rinish. Eng sevimli stilim!

struct PickerBootcamp: View {

    let filterOptions: [String] = ["Eng yangi", "Eng mashhur", "Eng ko'p yoqtirilgan"]
    @State var selection: String = "Eng yangi"

    var body: some View {
        Picker(
            selection: $selection,
            label: Text("Filter"),
            content: {
                ForEach(filterOptions, id: \.self) { option in
                    Text(option).tag(option)
                }
            }
        )
        .pickerStyle(MenuPickerStyle())
    }
}

MenuPickerStyle-da label ko'rinadi (oldingi stildan farqi). Bosilganda variantlar ro'yxati ochilib chiqadi.

Labelni chiroyli qilish

Picker(
    selection: $selection,
    label: HStack {
        Text("Filter")
            .font(.headline)
            .foregroundColor(.white)
        Text(selection)
            .foregroundColor(.white)
    }
    .padding()
    .padding(.horizontal)
    .background(Color.blue)
    .cornerRadius(10)
    .shadow(color: Color.blue.opacity(0.3), radius: 10, x: 0, y: 10),
    content: {
        ForEach(filterOptions, id: \.self) { option in
            Text(option).tag(option)
        }
    }
)
.pickerStyle(MenuPickerStyle())

Variantlarga ikonka qo'shish

ForEach(filterOptions, id: \.self) { option in
    HStack {
        Image(systemName: "heart.fill")
        Text(option)
    }
    .tag(option)
}

3. Segmented Picker — bo'limli tugmalar

2-3 ta variant bo'lganda eng qulay ko'rinish. Profil sozlamalari, filtr tugmalari kabi joylarda ko'p ishlatiladi.

struct PickerBootcamp: View {

    let filterOptions: [String] = ["Eng yangi", "Eng mashhur", "Eng ko'p yoqtirilgan"]
    @State var selection: String = "Eng yangi"

    var body: some View {
        Picker(
            selection: $selection,
            label: Text("Filter"),
            content: {
                ForEach(filterOptions.indices, id: \.self) { index in
                    Text(filterOptions[index]).tag(filterOptions[index])
                }
            }
        )
        .pickerStyle(SegmentedPickerStyle())
    }
}

ForEach-da id: \.self o'rniga .indices ishlatilganda indeks orqali elementlarga murojaat qilinadi.

Tanlangan segment rangini o'zgartirish

SegmentedPickerStyle UIKit-dan kelgan, shuning uchun sozlash uchun init() ichida UIKit metodlaridan foydalanamiz:

struct PickerBootcamp: View {

    let filterOptions: [String] = ["Eng yangi", "Eng mashhur", "Eng ko'p yoqtirilgan"]
    @State var selection: String = "Eng yangi"

    init() {
        // Tanlangan segmentning fon rangi
        UISegmentedControl.appearance().selectedSegmentTintColor = UIColor.red

        // Tanlangan matn rangi va uslubi
        let attributes: [NSAttributedString.Key: Any] = [
            .foregroundColor: UIColor.white
        ]
        UISegmentedControl.appearance().setTitleTextAttributes(attributes, for: .selected)
    }

    var body: some View {
        Picker(
            selection: $selection,
            label: Text("Filter"),
            content: {
                ForEach(filterOptions.indices, id: \.self) { index in
                    Text(filterOptions[index]).tag(filterOptions[index])
                }
            }
        )
        .pickerStyle(SegmentedPickerStyle())
    }
}

Muhim: UISegmentedControl.appearance() — ilovadagi barcha segmented control-larga ta'sir qiladi, faqat bitta ekranga emas. Bir nechta ekranda turli ranglar kerak bo'lsa, buni hisobga oling.

Stillarni solishtirish

StilQachon ishlatiladiSozlash imkoni
WheelPickerStyleKo'p variant (20+)O'rtacha
MenuPickerStyleKam variant (2-5)Label to'liq sozlanadi
SegmentedPickerStyle2-3 variantUIKit orqali sozlanadi

Xulosa

Bu videoda o'rgandik:

  • Picker — foydalanuvchiga bir nechta variantdan birini tanlatish komponenti
  • .tag() — tanlaganda selection-ga yoziladigan qiymat
  • ForEach — ko'p variantni qo'lda yozmasdan dinamik ko'rsatish
  • WheelPickerStyle — aylanuvchan g'ildirak, katta to'plamlar uchun
  • MenuPickerStyle — ochiladigan menyu, kam variantlar uchun
  • SegmentedPickerStyle — bo'limli tugmalar, 2-3 variant uchun
  • UISegmentedControl.appearance() — segmented control-ni UIKit orqali sozlash

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

Buy mea coffee